diff --git a/README.md b/README.md
index 4bb7c5d..3199016 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,16 @@
-# ✨ Flutter Floating Bottom Navigation Bar
+# ✨ Flutter Floating Bottom Navigation Bar WITH SOME UI UPDATES ✨
Fully customizable floating bottom navigation package for flutter.
+USAGE
+
+There is two type of bottom nav bar widget.
+You can either use 'title' and title displayes at the bottom of the icons
+OR
+You dont use 'title' attribute and the half-circle appears at the bottom of the selected icon.
+To try this, uncomment the title attribute in FloatingNavbarItem
+
## 🎮 How To Use
```dart
@@ -13,15 +21,40 @@ Fully customizable floating bottom navigation package for flutter.
//If you want to show body behind the navbar, it should be true
extendBody: true,
bottomNavigationBar: FloatingNavbar(
- onTap: (int val) {
- //returns tab id which is user tapped
- },
- currentIndex: 0,
+ margin: const EdgeInsets.symmetric(horizontal: 20),
+ selectedBackgroundColor: Colors.transparent,
+ backgroundColor: Palette.bottomNavBarColor,
+ selectedItemColor: Palette.darkGrey,
+ unselectedItemColor: Palette.lightGrey,
+ borderRadius: 10,
+ onTap: (int val) => setState(() => selectedIndex = val),
+ currentIndex: selectedIndex,
items: [
- FloatingNavbarItem(icon: Icons.home, title: 'Home'),
- FloatingNavbarItem(icon: Icons.explore, title: 'Explore'),
- FloatingNavbarItem(icon: Icons.chat_bubble_outline, title: 'Chats'),
- FloatingNavbarItem(icon: Icons.settings, title: 'Settings'),
+ FloatingNavbarItem(
+ selectedIcon: Icons.home,
+ unselectedIcon: Icons.home_outlined,
+ //title: "Home",
+ ),
+ FloatingNavbarItem(
+ selectedIcon: Icons.chat_bubble,
+ unselectedIcon: Icons.chat_bubble_outline,
+ //title: "Chat",
+ ),
+ FloatingNavbarItem(
+ selectedIcon: Icons.person,
+ unselectedIcon: Icons.person_outline,
+ //title: "User",
+ ),
+ FloatingNavbarItem(
+ selectedIcon: Icons.notifications,
+ unselectedIcon: Icons.notifications_none,
+ //title: "Alert",
+ ),
+ FloatingNavbarItem(
+ selectedIcon: Icons.ac_unit,
+ unselectedIcon: Icons.ac_unit,
+ //title: "Other",
+ ),
],
),
@@ -30,8 +63,9 @@ Fully customizable floating bottom navigation package for flutter.
```
-
+
+
### ❗️ Note
- Pull requests are welcomed, especially the animations :)
diff --git a/example/ios/Flutter/AppFrameworkInfo.plist b/example/ios/Flutter/AppFrameworkInfo.plist
index 6b4c0f7..f2872cf 100644
--- a/example/ios/Flutter/AppFrameworkInfo.plist
+++ b/example/ios/Flutter/AppFrameworkInfo.plist
@@ -21,6 +21,6 @@
CFBundleVersion
1.0
MinimumOSVersion
- 8.0
+ 9.0
diff --git a/example/ios/Runner.xcodeproj/project.pbxproj b/example/ios/Runner.xcodeproj/project.pbxproj
index 0d45b98..695aeab 100644
--- a/example/ios/Runner.xcodeproj/project.pbxproj
+++ b/example/ios/Runner.xcodeproj/project.pbxproj
@@ -3,17 +3,13 @@
archiveVersion = 1;
classes = {
};
- objectVersion = 46;
+ objectVersion = 50;
objects = {
/* Begin PBXBuildFile section */
1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */ = {isa = PBXBuildFile; fileRef = 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */; };
3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */ = {isa = PBXBuildFile; fileRef = 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */; };
- 3B80C3941E831B6300D905FE /* App.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 3B80C3931E831B6300D905FE /* App.framework */; };
- 3B80C3951E831B6300D905FE /* App.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 3B80C3931E831B6300D905FE /* App.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 74858FAE1ED2DC5600515810 /* AppDelegate.swift */; };
- 9705A1C61CF904A100538489 /* Flutter.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 9740EEBA1CF902C7004384FC /* Flutter.framework */; };
- 9705A1C71CF904A300538489 /* Flutter.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 9740EEBA1CF902C7004384FC /* Flutter.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
97C146FC1CF9000F007C117D /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FA1CF9000F007C117D /* Main.storyboard */; };
97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FD1CF9000F007C117D /* Assets.xcassets */; };
97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */; };
@@ -26,8 +22,6 @@
dstPath = "";
dstSubfolderSpec = 10;
files = (
- 3B80C3951E831B6300D905FE /* App.framework in Embed Frameworks */,
- 9705A1C71CF904A300538489 /* Flutter.framework in Embed Frameworks */,
);
name = "Embed Frameworks";
runOnlyForDeploymentPostprocessing = 0;
@@ -38,13 +32,11 @@
1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = GeneratedPluginRegistrant.h; sourceTree = ""; };
1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = ""; };
3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = AppFrameworkInfo.plist; path = Flutter/AppFrameworkInfo.plist; sourceTree = ""; };
- 3B80C3931E831B6300D905FE /* App.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = App.framework; path = Flutter/App.framework; sourceTree = ""; };
74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "Runner-Bridging-Header.h"; sourceTree = ""; };
74858FAE1ED2DC5600515810 /* AppDelegate.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = ""; };
7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = Release.xcconfig; path = Flutter/Release.xcconfig; sourceTree = ""; };
9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Debug.xcconfig; path = Flutter/Debug.xcconfig; sourceTree = ""; };
9740EEB31CF90195004384FC /* Generated.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Generated.xcconfig; path = Flutter/Generated.xcconfig; sourceTree = ""; };
- 9740EEBA1CF902C7004384FC /* Flutter.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Flutter.framework; path = Flutter/Flutter.framework; sourceTree = ""; };
97C146EE1CF9000F007C117D /* Runner.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Runner.app; sourceTree = BUILT_PRODUCTS_DIR; };
97C146FB1CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = ""; };
97C146FD1CF9000F007C117D /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = ""; };
@@ -57,8 +49,6 @@
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
- 9705A1C61CF904A100538489 /* Flutter.framework in Frameworks */,
- 3B80C3941E831B6300D905FE /* App.framework in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@@ -68,9 +58,7 @@
9740EEB11CF90186004384FC /* Flutter */ = {
isa = PBXGroup;
children = (
- 3B80C3931E831B6300D905FE /* App.framework */,
3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */,
- 9740EEBA1CF902C7004384FC /* Flutter.framework */,
9740EEB21CF90195004384FC /* Debug.xcconfig */,
7AFA3C8E1D35360C0083082E /* Release.xcconfig */,
9740EEB31CF90195004384FC /* Generated.xcconfig */,
@@ -147,7 +135,7 @@
97C146E61CF9000F007C117D /* Project object */ = {
isa = PBXProject;
attributes = {
- LastUpgradeCheck = 1020;
+ LastUpgradeCheck = 1300;
ORGANIZATIONNAME = "The Chromium Authors";
TargetAttributes = {
97C146ED1CF9000F007C117D = {
@@ -201,7 +189,7 @@
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
- shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" thin";
+ shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" embed_and_thin";
};
9740EEB61CF901F6004384FC /* Run Script */ = {
isa = PBXShellScriptBuildPhase;
@@ -253,7 +241,6 @@
/* Begin XCBuildConfiguration section */
249021D3217E4FDB00AE95B9 /* Profile */ = {
isa = XCBuildConfiguration;
- baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_ANALYZER_NONNULL = YES;
@@ -293,7 +280,7 @@
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
- IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+ IPHONEOS_DEPLOYMENT_TARGET = 9.0;
MTL_ENABLE_DEBUG_INFO = NO;
SDKROOT = iphoneos;
SUPPORTED_PLATFORMS = iphoneos;
@@ -330,7 +317,6 @@
};
97C147031CF9000F007C117D /* Debug */ = {
isa = XCBuildConfiguration;
- baseConfigurationReference = 9740EEB21CF90195004384FC /* Debug.xcconfig */;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_ANALYZER_NONNULL = YES;
@@ -376,7 +362,7 @@
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
- IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+ IPHONEOS_DEPLOYMENT_TARGET = 9.0;
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
SDKROOT = iphoneos;
@@ -386,7 +372,6 @@
};
97C147041CF9000F007C117D /* Release */ = {
isa = XCBuildConfiguration;
- baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_ANALYZER_NONNULL = YES;
@@ -426,7 +411,7 @@
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
- IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+ IPHONEOS_DEPLOYMENT_TARGET = 9.0;
MTL_ENABLE_DEBUG_INFO = NO;
SDKROOT = iphoneos;
SUPPORTED_PLATFORMS = iphoneos;
diff --git a/example/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata b/example/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata
index 1d526a1..919434a 100644
--- a/example/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata
+++ b/example/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata
@@ -2,6 +2,6 @@
+ location = "self:">
diff --git a/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
index a28140c..3db53b6 100644
--- a/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
+++ b/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
@@ -1,6 +1,6 @@
{
- int _index = 0;
+ int selectedIndex = 0;
+ final List pages = [
+ const Scaffold(body: Center(child: Text("Home"))),
+ const Scaffold(body: Center(child: Text("Message"))),
+ const Scaffold(body: Center(child: Text("User"))),
+ const Scaffold(body: Center(child: Text("Alert"))),
+ const Scaffold(body: Center(child: Text("Other"))),
+ ];
+
+//USAGE: There is two type of bottom nav bar widget.
+//You can either use 'title' and title displayes at the bottom of the icons
+//OR
+//You dont use 'title' attribute and the half-circle appears at the bottom of the selected icon.
+//To try this, uncomment the title attribute in FloatingNavbarItem
@override
Widget build(BuildContext context) {
return MaterialApp(
- title: 'Floating NavBar Example',
- home: Scaffold(
- appBar: AppBar(
- title: Text('Floating NavBar Example'),
- centerTitle: true,
- ),
- //If you want to show body behind the navbar, it should be true
- extendBody: true,
- body: Center(
- child: Text(
- "index: $_index",
- style: TextStyle(
- fontSize: 52,
- ),
+ title: 'Floating NavBar Example',
+ home: Scaffold(
+ body: pages[selectedIndex],
+ bottomNavigationBar: FloatingNavbar(
+ margin: const EdgeInsets.symmetric(horizontal: 20),
+ selectedBackgroundColor: Colors.transparent,
+ backgroundColor: Palette.bottomNavBarColor,
+ selectedItemColor: Palette.darkGrey,
+ unselectedItemColor: Palette.lightGrey,
+ borderRadius: 10,
+ onTap: (int val) => setState(() => selectedIndex = val),
+ currentIndex: selectedIndex,
+ items: [
+ FloatingNavbarItem(
+ selectedIcon: Icons.home,
+ unselectedIcon: Icons.home_outlined,
+ //title: "Home",
+ ),
+ FloatingNavbarItem(
+ selectedIcon: Icons.chat_bubble,
+ unselectedIcon: Icons.chat_bubble_outline,
+ //title: "Chat",
+ ),
+ FloatingNavbarItem(
+ selectedIcon: Icons.person,
+ unselectedIcon: Icons.person_outline,
+ //title: "User",
+ ),
+ FloatingNavbarItem(
+ selectedIcon: Icons.notifications,
+ unselectedIcon: Icons.notifications_none,
+ //title: "Alert",
+ ),
+ FloatingNavbarItem(
+ selectedIcon: Icons.ac_unit,
+ unselectedIcon: Icons.ac_unit,
+ //title: "Other",
+ ),
+ ],
),
- ),
- bottomNavigationBar: FloatingNavbar(
- onTap: (int val) => setState(() => _index = val),
- currentIndex: _index,
- items: [
- FloatingNavbarItem(icon: Icons.home, title: 'Home'),
- FloatingNavbarItem(icon: Icons.explore, title: 'Explore'),
- FloatingNavbarItem(icon: Icons.chat_bubble_outline, title: 'Chats'),
- FloatingNavbarItem(icon: Icons.settings, title: 'Settings'),
- ],
- ),
- ),
- );
+ ));
}
}
+
+mixin Palette {
+ static Color bottomNavBarColor = const Color(0xFFFAFAFA);
+ static Color lightGrey = const Color(0xFFB8BDBF);
+ static Color darkGrey = const Color(0xFF353535);
+}
diff --git a/example/pubspec.lock b/example/pubspec.lock
index 1059a56..f41f1f5 100644
--- a/example/pubspec.lock
+++ b/example/pubspec.lock
@@ -7,7 +7,7 @@ packages:
name: async
url: "https://pub.dartlang.org"
source: hosted
- version: "2.5.0"
+ version: "2.8.2"
boolean_selector:
dependency: transitive
description:
@@ -21,14 +21,14 @@ packages:
name: characters
url: "https://pub.dartlang.org"
source: hosted
- version: "1.1.0"
+ version: "1.2.0"
charcode:
dependency: transitive
description:
name: charcode
url: "https://pub.dartlang.org"
source: hosted
- version: "1.2.0"
+ version: "1.3.1"
clock:
dependency: transitive
description:
@@ -42,7 +42,7 @@ packages:
name: collection
url: "https://pub.dartlang.org"
source: hosted
- version: "1.15.0"
+ version: "1.16.0"
cupertino_icons:
dependency: "direct main"
description:
@@ -63,7 +63,7 @@ packages:
path: ".."
relative: true
source: path
- version: "1.4.1"
+ version: "1.5.2"
flutter:
dependency: "direct main"
description: flutter
@@ -80,21 +80,28 @@ packages:
name: matcher
url: "https://pub.dartlang.org"
source: hosted
- version: "0.12.10"
+ version: "0.12.11"
+ material_color_utilities:
+ dependency: transitive
+ description:
+ name: material_color_utilities
+ url: "https://pub.dartlang.org"
+ source: hosted
+ version: "0.1.4"
meta:
dependency: transitive
description:
name: meta
url: "https://pub.dartlang.org"
source: hosted
- version: "1.3.0"
+ version: "1.7.0"
path:
dependency: transitive
description:
name: path
url: "https://pub.dartlang.org"
source: hosted
- version: "1.8.0"
+ version: "1.8.1"
sky_engine:
dependency: transitive
description: flutter
@@ -106,7 +113,7 @@ packages:
name: source_span
url: "https://pub.dartlang.org"
source: hosted
- version: "1.8.0"
+ version: "1.8.2"
stack_trace:
dependency: transitive
description:
@@ -141,21 +148,14 @@ packages:
name: test_api
url: "https://pub.dartlang.org"
source: hosted
- version: "0.2.19"
- typed_data:
- dependency: transitive
- description:
- name: typed_data
- url: "https://pub.dartlang.org"
- source: hosted
- version: "1.3.0"
+ version: "0.4.9"
vector_math:
dependency: transitive
description:
name: vector_math
url: "https://pub.dartlang.org"
source: hosted
- version: "2.1.0"
+ version: "2.1.2"
sdks:
- dart: ">=2.12.0 <3.0.0"
+ dart: ">=2.14.0 <3.0.0"
flutter: ">=1.17.0"
diff --git a/lib/src/floating_navbar.dart b/lib/src/floating_navbar.dart
index e708418..42a4306 100644
--- a/lib/src/floating_navbar.dart
+++ b/lib/src/floating_navbar.dart
@@ -1,8 +1,7 @@
import 'package:floating_bottom_navigation_bar/src/floating_navbar_item.dart';
import 'package:flutter/material.dart';
-typedef Widget ItemBuilder(
- BuildContext context, int index, FloatingNavbarItem items);
+typedef Widget ItemBuilder(BuildContext context, FloatingNavbarItem items);
class FloatingNavbar extends StatefulWidget {
final List items;
@@ -76,26 +75,38 @@ class _FloatingNavbarState extends State {
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
- Container(
- padding: widget.padding,
- margin: widget.margin,
- decoration: BoxDecoration(
- borderRadius: BorderRadius.circular(widget.borderRadius),
- color: widget.backgroundColor,
- ),
- width: widget.width,
- child: Padding(
- padding: const EdgeInsets.symmetric(horizontal: 8),
- child: Row(
- mainAxisAlignment: MainAxisAlignment.spaceAround,
- mainAxisSize: MainAxisSize.max,
- children: items
- .asMap()
- .map((i, f) {
- return MapEntry(i, widget.itemBuilder(context, i, f));
- })
- .values
- .toList(),
+ Padding(
+ padding: widget.margin,
+ child: Container(
+ // padding: widget.padding,
+ decoration: BoxDecoration(
+ borderRadius: BorderRadius.circular(widget.borderRadius),
+ color: widget.backgroundColor,
+ boxShadow: [
+ BoxShadow(
+ color: Colors.white.withOpacity(0.5),
+ offset: const Offset(-6, -6),
+ blurRadius: 20,
+ ),
+ BoxShadow(
+ color: Colors.black.withOpacity(0.1),
+ offset: const Offset(6, 6),
+ blurRadius: 20,
+ ),
+ ],
+ ),
+ width: widget.width,
+ child: Padding(
+ padding: const EdgeInsets.symmetric(horizontal: 8),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceAround,
+ children: items.map((f) {
+ return widget.itemBuilder(
+ context,
+ f,
+ );
+ }).toList(),
+ ),
),
),
),
@@ -119,56 +130,53 @@ ItemBuilder _defaultItemBuilder({
double? itemBorderRadius,
double? borderRadius,
}) {
- return (BuildContext context, int index, FloatingNavbarItem item) => Expanded(
+ return (BuildContext context, FloatingNavbarItem item) => Expanded(
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
- AnimatedContainer(
- duration: Duration(milliseconds: 300),
- decoration: BoxDecoration(
- color: currentIndex == index
- ? selectedBackgroundColor
- : Colors.transparent,
- borderRadius: BorderRadius.circular(itemBorderRadius!)),
- child: InkWell(
- onTap: () {
- onTap!(index);
- },
- borderRadius: BorderRadius.circular(8),
- child: Container(
- width: width.isFinite
- ? (width / items.length - 8)
- : MediaQuery.of(context).size.width / items.length - 24,
- padding: EdgeInsets.symmetric(
- horizontal: 4, vertical: item.title != null ? 4 : 8),
- child: Column(
- mainAxisSize: MainAxisSize.max,
- mainAxisAlignment: MainAxisAlignment.center,
- crossAxisAlignment: CrossAxisAlignment.center,
- children: [
- item.customWidget == null
- ? Icon(
- item.icon,
- color: currentIndex == index
- ? selectedItemColor
- : unselectedItemColor,
- size: iconSize,
+ InkWell(
+ onTap: () {
+ onTap!(items.indexOf(item));
+ },
+ child: SizedBox(
+ width: width.isFinite ? (width / items.length - 8) : MediaQuery.of(context).size.width / items.length - 30,
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ const SizedBox(
+ height: 20,
+ ),
+ Icon(
+ currentIndex == items.indexOf(item) ? item.selectedIcon : item.unselectedIcon,
+ color: currentIndex == items.indexOf(item) ? selectedItemColor : unselectedItemColor,
+ size: iconSize,
+ ),
+ const SizedBox(
+ height: 10,
+ ),
+ Align(
+ alignment: Alignment.bottomCenter,
+ child: item.title != ''
+ ? Padding(
+ padding: const EdgeInsets.only(bottom: 10),
+ child: Text(
+ item.title,
+ style: TextStyle(
+ color: currentIndex == items.indexOf(item) ? selectedItemColor : unselectedItemColor,
+ ),
+ ),
)
- : item.customWidget!,
- if (item.title != null)
- Text(
- '${item.title}',
- overflow: TextOverflow.ellipsis,
- style: TextStyle(
- color: currentIndex == index
- ? selectedItemColor
- : unselectedItemColor,
- fontSize: fontSize,
- ),
- ),
- ],
- ),
+ : ClipPath(
+ clipper: CustomClip(),
+ child: Container(
+ width: 30,
+ height: 10,
+ color: currentIndex == items.indexOf(item) ? selectedItemColor : Colors.transparent,
+ ),
+ ),
+ ),
+ ],
),
),
),
@@ -176,3 +184,28 @@ ItemBuilder _defaultItemBuilder({
),
);
}
+
+class CustomClip extends CustomClipper {
+ @override
+ Path getClip(Size size) {
+ const double radius = 15;
+
+ final Path path = Path();
+ path
+ ..moveTo(size.width / 2, 0)
+ ..arcToPoint(Offset(size.width, size.height), radius: const Radius.circular(radius))
+ ..lineTo(0, size.height)
+ ..arcToPoint(
+ Offset(size.width / 2, 0),
+ radius: const Radius.circular(radius),
+ )
+ ..close();
+
+ return path;
+ }
+
+ @override
+ bool shouldReclip(covariant CustomClipper oldClipper) {
+ return true;
+ }
+}
diff --git a/lib/src/floating_navbar_item.dart b/lib/src/floating_navbar_item.dart
index c43bc7f..402f8f1 100644
--- a/lib/src/floating_navbar_item.dart
+++ b/lib/src/floating_navbar_item.dart
@@ -1,13 +1,16 @@
import 'package:flutter/material.dart';
class FloatingNavbarItem {
- final String? title;
- final IconData? icon;
+ final String title;
+ final IconData? selectedIcon;
+ final IconData? unselectedIcon;
+
final Widget? customWidget;
FloatingNavbarItem({
- this.icon,
- this.title,
+ this.selectedIcon,
+ this.unselectedIcon,
+ this.title = '',
this.customWidget,
- }) : assert(icon != null || customWidget != null);
+ }) : assert(selectedIcon != null || customWidget != null);
}
diff --git a/pubspec.lock b/pubspec.lock
index b55f540..8f6aea3 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -7,7 +7,7 @@ packages:
name: async
url: "https://pub.dartlang.org"
source: hosted
- version: "2.5.0"
+ version: "2.8.2"
boolean_selector:
dependency: transitive
description:
@@ -21,14 +21,14 @@ packages:
name: characters
url: "https://pub.dartlang.org"
source: hosted
- version: "1.1.0"
+ version: "1.2.0"
charcode:
dependency: transitive
description:
name: charcode
url: "https://pub.dartlang.org"
source: hosted
- version: "1.2.0"
+ version: "1.3.1"
clock:
dependency: transitive
description:
@@ -42,7 +42,7 @@ packages:
name: collection
url: "https://pub.dartlang.org"
source: hosted
- version: "1.15.0"
+ version: "1.16.0"
fake_async:
dependency: transitive
description:
@@ -66,21 +66,28 @@ packages:
name: matcher
url: "https://pub.dartlang.org"
source: hosted
- version: "0.12.10"
+ version: "0.12.11"
+ material_color_utilities:
+ dependency: transitive
+ description:
+ name: material_color_utilities
+ url: "https://pub.dartlang.org"
+ source: hosted
+ version: "0.1.4"
meta:
dependency: transitive
description:
name: meta
url: "https://pub.dartlang.org"
source: hosted
- version: "1.3.0"
+ version: "1.7.0"
path:
dependency: transitive
description:
name: path
url: "https://pub.dartlang.org"
source: hosted
- version: "1.8.0"
+ version: "1.8.1"
sky_engine:
dependency: transitive
description: flutter
@@ -92,7 +99,7 @@ packages:
name: source_span
url: "https://pub.dartlang.org"
source: hosted
- version: "1.8.0"
+ version: "1.8.2"
stack_trace:
dependency: transitive
description:
@@ -127,21 +134,14 @@ packages:
name: test_api
url: "https://pub.dartlang.org"
source: hosted
- version: "0.2.19"
- typed_data:
- dependency: transitive
- description:
- name: typed_data
- url: "https://pub.dartlang.org"
- source: hosted
- version: "1.3.0"
+ version: "0.4.9"
vector_math:
dependency: transitive
description:
name: vector_math
url: "https://pub.dartlang.org"
source: hosted
- version: "2.1.0"
+ version: "2.1.2"
sdks:
- dart: ">=2.12.0 <3.0.0"
+ dart: ">=2.14.0 <3.0.0"
flutter: ">=1.17.0"
diff --git a/screenshot.png b/screenshot.png
deleted file mode 100644
index f1c23b1..0000000
Binary files a/screenshot.png and /dev/null differ
diff --git a/with_title.png b/with_title.png
new file mode 100644
index 0000000..b9fa001
Binary files /dev/null and b/with_title.png differ
diff --git a/without_title.png b/without_title.png
new file mode 100644
index 0000000..67b2080
Binary files /dev/null and b/without_title.png differ