UI updates

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. <br /> 
+You can either use 'title' and title displayes at the bottom of the icons <br /> 
+OR <br /> 
+You dont use 'title' attribute and the half-circle appears at the bottom of the selected icon. <br /> 
+To try this, uncomment the title attribute in FloatingNavbarItem <br /> 
+
 ## 🎮 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.
 ```
 
 
-<img width="450" height="900" src="https://github.com/right7ctrl/flutter_floating_bottom_navigation_bar/blob/master/image.png?raw=true">
+<img width="450" height="900" src="https://github.com/montaag/flutter_floating_bottom_navigation_bar/blob/master/with_title.png">
 
+<img width="450" height="900" src="https://github.com/montaag/flutter_floating_bottom_navigation_bar/blob/master/without_title.png">
 ### ❗️ Note
 
 - Pull requests are welcomed, especially the animations :)

example/ios/Flutter/AppFrameworkInfo.plist

@@ -21,6 +21,6 @@
   <key>CFBundleVersion</key>
   <string>1.0</string>
   <key>MinimumOSVersion</key>
-  <string>8.0</string>
+  <string>9.0</string>
 </dict>
 </plist>

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 = "<group>"; };
 		1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = "<group>"; };
 		3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = AppFrameworkInfo.plist; path = Flutter/AppFrameworkInfo.plist; sourceTree = "<group>"; };
-		3B80C3931E831B6300D905FE /* App.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = App.framework; path = Flutter/App.framework; sourceTree = "<group>"; };
 		74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "Runner-Bridging-Header.h"; sourceTree = "<group>"; };
 		74858FAE1ED2DC5600515810 /* AppDelegate.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
 		7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = Release.xcconfig; path = Flutter/Release.xcconfig; sourceTree = "<group>"; };
 		9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Debug.xcconfig; path = Flutter/Debug.xcconfig; sourceTree = "<group>"; };
 		9740EEB31CF90195004384FC /* Generated.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Generated.xcconfig; path = Flutter/Generated.xcconfig; sourceTree = "<group>"; };
-		9740EEBA1CF902C7004384FC /* Flutter.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Flutter.framework; path = Flutter/Flutter.framework; sourceTree = "<group>"; };
 		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 = "<group>"; };
 		97C146FD1CF9000F007C117D /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
@@ -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;

example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1020"
+   LastUpgradeVersion = "1300"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

example/lib/main.dart

@@ -10,38 +10,70 @@ class MyApp extends StatefulWidget {
 }
 
 class _MyAppState extends State<MyApp> {
-  int _index = 0;
+  int selectedIndex = 0;
+  final List<Widget> 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);
+}