Merge pull request #13 from maheshmnj/navbar_type

Add support for new Navigationbar using `type: NavbartType.notched`

.gitignore

@@ -8,7 +8,6 @@
 .buildlog/
 .history
 .svn/
-.metadata
 migrate_working_dir/
 
 # IntelliJ related

.metadata

@@ -0,0 +1,10 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+  channel: stable
+
+project_type: package

.vscode/launch.json

@@ -0,0 +1,45 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "navbar_router",
+            "request": "launch",
+            "type": "dart"
+        },
+        {
+            "name": "navbar_router (profile mode)",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "profile"
+        },
+        {
+            "name": "navbar_router (release mode)",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "release"
+        },
+        {
+            "name": "example",
+            "cwd": "example",
+            "request": "launch",
+            "type": "dart"
+        },
+        {
+            "name": "example (profile mode)",
+            "cwd": "example",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "profile"
+        },
+        {
+            "name": "example (release mode)",
+            "cwd": "example",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "release"
+        }
+    ]
+}

.vscode/settings.json

@@ -1,3 +1,16 @@
 {
-    "dart.flutterSdkPath": "/Users/mahesh/Development/flutter"
+    "dart.flutterSdkPath": "/Users/mahesh/Development/flutter",
+    "dart.autoImportCompletions": true,
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+        "source.organizeImports": true
+    },
+    "[dart]": {
+        "editor.tabSize": 2,
+        "editor.insertSpaces": true,
+        "editor.detectIndentation": false,
+        "editor.suggest.insertMode": "replace",
+        "editor.defaultFormatter": "Dart-Code.dart-code",
+        "editor.inlayHints.enabled": "offUnlessPressed",
+    }
 }

CHANGELOG.md

@@ -1,40 +1,37 @@
+## [0.4.0]  Dec 25, 2022
+- [WIP Ref:#8](https://github.com/maheshmnj/navbar_router/issues/8) Adds support for custom Navbar using `NavbarRouter.type: NavbarType.notched`
+
 ## [0.3.3]  Aug 14, 2022
 - Pop route programmatically
 
 ## [0.3.2]  Aug 14, 2022
-
 - update docs
+
 ## [0.3.1]  Aug 14, 2022
 
 - Fix back button did not pop up nested routes
 - add `initialIndex` property
 
 ## [0.3.0]  Aug 7, 2022
-
 * Remember stack history on back button press [Issue 9](https://github.com/maheshmnj/navbar_router/issues/9)
-## [0.2.2]  Jul 9, 2022
 
+## [0.2.2]  Jul 9, 2022
 * Remove unnecessary shadow from BottomNavigationBar.
 
 ## [0.2.1]  Jul 2, 2022
-
 * Add `onChanged` callback to `NavbarRouter`
 * Add decoration properties to `NavbarDecoration`
 
 ## [0.2.0]  Jun 26, 2022
-
 * Add `isDesktop` property to make navbar adaptable
   to different screen sizes.
 
 ## [0.1.2]  Jun 16, 2022
-
 * update docs and example
 * fix linter warnings
 
 ## [0.1.0]  Jun 15, 2022
-
 * initial release.
 
 ## [0.1.1]  Jun 15, 2022
-
 * Update dart constraints

README.md

@@ -1,4 +1,4 @@
-## **navbar_router 0.3.3**
+## **navbar_router 0.4.0**
 
  <a href="https://pub.dev/packages/navbar_router"><img src="https://img.shields.io/pub/v/navbar_router.svg" alt="Pub"></a>
 
@@ -7,6 +7,7 @@ This is a BottomNavigionBar created by considering the advanced use cases in rea
 ## **Features**
 
 - Adapatable to different device Sizes using `isDesktop` and `NavbarDecoration.isExtended` Property.
+- Choose between set of NavigtaionBars using `NavbarDecoration.navbarType` property.
 - Remembers navigation history of Navbar.
 - Ability to push routes in the nested or root navigator
 - Smooth transitions when changing navbar destinations
@@ -120,6 +121,20 @@ defaults to
 <img src="https://miro.medium.com/max/600/1*08wCOOPCe1C1l_2uqIYEEg.gif">
 
 
+## Choose between different NavbarTypes
+
+You can choose between different NavbarTypes using the `NavbarDecoration.navbarType` property. This allows you to choose between the default NavbarType.standard and NavbarType.notched
+
+
+### NavbarType.standard (default)
+
+![ezgif com-gif-maker (1)](https://user-images.githubusercontent.com/31410839/209458339-d66524c4-2897-4136-a70f-275d5b6f786e.gif)
+
+
+### NavbarType.notched
+
+![ezgif com-gif-maker](https://user-images.githubusercontent.com/31410839/209458282-2ac3f194-abf4-4406-a7ff-0581dfd09229.gif)
+
 
 ## Hide or show bottomNavigationBar
 
@@ -190,6 +205,8 @@ Hide/show navbar on scroll             |  Hide/show navbar on drawer open/close
   ***destinations***: A List of `DestinationRouter` to show when the user taps the [NavbarItem].
   Each DestinationRouter specifies a List of Destinations, initialRoute, and the navbarItem corresponding to that destination.
 
+  **type**: The type of NavigationBar to be passed to NavbarRouter defaults to `NavbarType.standard`. This allows you to choose between the default `NavbarType.standard` and `NavbarType.notched`.
+
   ***decoration*** : The decoraton for Navbar has all the properties you would expect in a [BottomNavigationBar] to adjust the style of the Navbar.
 
   ***destinationAnimationCurve***: Curve for the destination animation when the user taps a navbar item. Defaults to `Curves.fastOutSlowIn`.

example/lib/main.dart

@@ -36,6 +36,7 @@ class _HomePageState extends State<HomePage> {
     NavbarItem(Icons.home, 'Home', backgroundColor: colors[0]),
     NavbarItem(Icons.shopping_bag, 'Products', backgroundColor: colors[1]),
     NavbarItem(Icons.person, 'Me', backgroundColor: colors[2]),
+    NavbarItem(Icons.settings, 'Settings', backgroundColor: colors[0]),
   ];
 
   final Map<int, Map<String, Widget>> _routes = const {
@@ -52,6 +53,9 @@ class _HomePageState extends State<HomePage> {
       '/': UserProfile(),
       ProfileEdit.route: ProfileEdit(),
     },
+    3: {
+      '/': Settings(),
+    },
   };
 
   void showSnackBar() {
@@ -73,23 +77,43 @@ class _HomePageState extends State<HomePage> {
   DateTime oldTime = DateTime.now();
   DateTime newTime = DateTime.now();
 
+  /// This is only for demo purposes
+  void simulateTabChange() {
+    WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
+      for (int i = 0; i < items.length * 2; i++) {
+        NavbarNotifier.index = i % items.length;
+        await Future.delayed(const Duration(milliseconds: 1000));
+      }
+    });
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    // simulateTabChange();
+  }
+
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size;
     return Scaffold(
       resizeToAvoidBottomInset: false,
-      floatingActionButton: FloatingActionButton(
-        child: Icon(
-            NavbarNotifier.isNavbarHidden ? Icons.toggle_off : Icons.toggle_on),
-        onPressed: () {
-          // Programmatically toggle the Navbar visibility
-          if (NavbarNotifier.isNavbarHidden) {
-            NavbarNotifier.hideBottomNavBar = false;
-          } else {
-            NavbarNotifier.hideBottomNavBar = true;
-          }
-          setState(() {});
-        },
+      floatingActionButton: Padding(
+        padding: const EdgeInsets.only(bottom: 24.0),
+        child: FloatingActionButton(
+          child: Icon(NavbarNotifier.isNavbarHidden
+              ? Icons.toggle_off
+              : Icons.toggle_on),
+          onPressed: () {
+            // Programmatically toggle the Navbar visibility
+            if (NavbarNotifier.isNavbarHidden) {
+              NavbarNotifier.hideBottomNavBar = false;
+            } else {
+              NavbarNotifier.hideBottomNavBar = true;
+            }
+            setState(() {});
+          },
+        ),
       ),
       body: NavbarRouter(
         errorBuilder: (context) {
@@ -112,19 +136,22 @@ class _HomePageState extends State<HomePage> {
             return isExitingApp;
           }
         },
+        initialIndex: 2,
+        type: NavbarType.notched,
         destinationAnimationCurve: Curves.fastOutSlowIn,
         destinationAnimationDuration: 600,
-        decoration: NavbarDecoration(
-            selectedLabelTextStyle: const TextStyle(color: Colors.red),
+        decoration: NotchedDecoration(
+            // selectedLabelTextStyle: const TextStyle(color: Colors.red),
             showUnselectedLabels: true,
-            unselectedLabelTextStyle:
-                const TextStyle(color: Colors.black, fontSize: 10),
-            selectedIconTheme: const IconThemeData(color: Colors.red),
-            isExtended: size.width > 800 ? true : false,
-            navbarType: BottomNavigationBarType.fixed),
-        onChanged: (x) {
-          debugPrint('index changed $x');
-        },
+            unselectedIconColor: Colors.white54,
+            unselectedItemColor: Colors.white54
+            // unselectedLabelTextStyle:
+            //     const TextStyle(color: Colors.white, fontSize: 12),
+            // selectedIconTheme: const IconThemeData(color: Colors.red),
+            // isExtended: size.width > 800 ? true : false,
+            // navbarType: BottomNavigationBarType.shifting
+            ),
+        onChanged: (x) {},
         backButtonBehavior: BackButtonBehavior.rememberHistory,
         destinations: [
           for (int i = 0; i < items.length; i++)
@@ -503,6 +530,31 @@ class UserProfile extends StatelessWidget {
   }
 }
 
+class Settings extends StatefulWidget {
+  const Settings({super.key});
+
+  @override
+  State<Settings> createState() => _SettingsState();
+}
+
+class _SettingsState extends State<Settings> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Settings'),
+      ),
+      body: ListView.builder(
+          itemCount: 10,
+          itemBuilder: (context, index) {
+            return ListTile(
+              title: Text('Setting $index'),
+            );
+          }),
+    );
+  }
+}
+
 class ProfileEdit extends StatelessWidget {
   static const String route = '/profile/edit';