Merge pull request #52 from maheshmnj/fix-51

Migrate to PopScope and Fix back button not showing destination issue

Author: maheshj01

CHANGELOG.md

@@ -1,7 +1,10 @@
-## [0.7.5] April 30, 2024
+## [0.7.5] July 12, 2024
 
+- Migrate WillPopScope to PopScope [Issue 48](https://github.com/maheshmnj/navbar_router/pull/48/)
 - Fix Deprecation [Issue 49](https://github.com/maheshmnj/navbar_router/pull/49/)
 - Migrate example app to Flutter's Gradle plugins
+- Fix: Navbar Destination not updating on backbutton press [Issue 51](https://github.com/maheshmnj/navbar_router/pull/51/)
+- docs: Navbar Router should be wrapped in builder for Snackbar to work
 
 ## [0.7.4] April 30, 2024
 

README.md

@@ -1,4 +1,4 @@
-## **navbar_router v0.7.4**
+## **navbar_router v0.7.5**
 
 <a href="https://github.com/maheshmnj/searchfield" rel="noopener" target="_blank"><img src="https://img.shields.io/badge/platform-flutter-ff69b4.svg" alt="Flutter Platform Badge"></a>
 <a href="https://pub.dev/packages/navbar_router"><img src="https://img.shields.io/pub/v/navbar_router.svg" alt="Pub"></a>
@@ -189,6 +189,8 @@ You can show a snackbar on top of the navbar by using the `NavbarNotifier.showSn
 
 ![snackbar](https://github.com/flutter/flutter/assets/31410839/b2c95c3b-45fa-474c-acee-6f48a051f8ef)
 
+Note: You will need to wrap your NavbarRouter within a builder for this to work see the [example](example/lib/main.dart) for more details.
+
 ```dart
 NavbarNotifier.showSnackBar(
   context,

example/lib/main.dart

@@ -239,74 +239,76 @@ class _HomePageState extends ConsumerState<HomePage> {
             }
             return const SizedBox.shrink();
           }),
-      body: NavbarRouter(
-        errorBuilder: (context) {
-          return const Center(child: Text('Error 404'));
-        },
-        isDesktop: size.width > 600 ? true : false,
-        onBackButtonPressed: (isExitingApp) {
-          if (isExitingApp) {
-            newTime = DateTime.now();
-            int difference = newTime.difference(oldTime).inMilliseconds;
-            oldTime = newTime;
-            if (difference < 1000) {
-              NavbarNotifier.hideSnackBar(context);
-              return isExitingApp;
+      body: Builder(builder: (context) {
+        return NavbarRouter(
+          errorBuilder: (context) {
+            return const Center(child: Text('Error 404'));
+          },
+          isDesktop: size.width > 600 ? true : false,
+          onBackButtonPressed: (isExitingApp) {
+            if (isExitingApp) {
+              newTime = DateTime.now();
+              int difference = newTime.difference(oldTime).inMilliseconds;
+              oldTime = newTime;
+              if (difference < 1000) {
+                NavbarNotifier.hideSnackBar(context);
+                return isExitingApp;
+              } else {
+                final state = Scaffold.of(context);
+                NavbarNotifier.showSnackBar(
+                  context,
+                  "Tap back button again to exit",
+                  bottom: state.hasFloatingActionButton ? 0 : kNavbarHeight,
+                );
+                return false;
+              }
             } else {
-              final state = Scaffold.of(context);
-              NavbarNotifier.showSnackBar(
-                context,
-                "Tap back button again to exit",
-                bottom: state.hasFloatingActionButton ? 0 : kNavbarHeight,
-              );
-              return false;
+              return isExitingApp;
             }
-          } else {
-            return isExitingApp;
-          }
-        },
-        initialIndex: 0,
-        type: NavbarType.floating,
-        destinationAnimationCurve: Curves.fastOutSlowIn,
-        destinationAnimationDuration: 200,
-        decoration: FloatingNavbarDecoration(
-          height: 80,
-          // minExtendedWidth: 226,
-          // minWidth: 92,
-          borderRadius: BorderRadius.circular(20),
-          isExtended: size.width > 800 ? true : false,
-          // labelTextStyle: const TextStyle(
-          //     color: Color.fromARGB(255, 176, 207, 233), fontSize: 14),
-          // elevation: 3.0,
-          // indicatorShape: const RoundedRectangleBorder(
-          //   borderRadius: BorderRadius.all(Radius.circular(20)),
-          // ),
-          backgroundColor:
-              Theme.of(context).colorScheme.surfaceContainerHighest,
-          // indicatorColor: const Color.fromARGB(255, 176, 207, 233),
-          // // iconTheme: const IconThemeData(color: Colors.indigo),
-          // /// labelTextStyle: const TextStyle(color: Colors.white, fontSize: 14),
-          // labelBehavior: NavigationDestinationLabelBehavior.alwaysShow
-        ),
-        onChanged: (x) {
-          ref.read(appProvider.notifier).setIndex(x);
-        },
-        backButtonBehavior: BackButtonBehavior.rememberHistory,
-        destinations: [
-          for (int i = 0; i < items.length; i++)
-            DestinationRouter(
-              navbarItem: items[i],
-              destinations: [
-                for (int j = 0; j < _routes[i]!.keys.length; j++)
-                  Destination(
-                    route: _routes[i]!.keys.elementAt(j),
-                    widget: _routes[i]!.values.elementAt(j),
-                  ),
-              ],
-              initialRoute: _routes[i]!.keys.first,
-            ),
-        ],
-      ),
+          },
+          initialIndex: 0,
+          type: NavbarType.floating,
+          destinationAnimationCurve: Curves.fastOutSlowIn,
+          destinationAnimationDuration: 200,
+          decoration: FloatingNavbarDecoration(
+            height: 80,
+            // minExtendedWidth: 226,
+            // minWidth: 92,
+            borderRadius: BorderRadius.circular(20),
+            isExtended: size.width > 800 ? true : false,
+            // labelTextStyle: const TextStyle(
+            //     color: Color.fromARGB(255, 176, 207, 233), fontSize: 14),
+            // elevation: 3.0,
+            // indicatorShape: const RoundedRectangleBorder(
+            //   borderRadius: BorderRadius.all(Radius.circular(20)),
+            // ),
+            backgroundColor:
+                Theme.of(context).colorScheme.surfaceContainerHighest,
+            // indicatorColor: const Color.fromARGB(255, 176, 207, 233),
+            // // iconTheme: const IconThemeData(color: Colors.indigo),
+            // /// labelTextStyle: const TextStyle(color: Colors.white, fontSize: 14),
+            // labelBehavior: NavigationDestinationLabelBehavior.alwaysShow
+          ),
+          onChanged: (x) {
+            ref.read(appProvider.notifier).setIndex(x);
+          },
+          backButtonBehavior: BackButtonBehavior.rememberHistory,
+          destinations: [
+            for (int i = 0; i < items.length; i++)
+              DestinationRouter(
+                navbarItem: items[i],
+                destinations: [
+                  for (int j = 0; j < _routes[i]!.keys.length; j++)
+                    Destination(
+                      route: _routes[i]!.keys.elementAt(j),
+                      widget: _routes[i]!.values.elementAt(j),
+                    ),
+                ],
+                initialRoute: _routes[i]!.keys.first,
+              ),
+          ],
+        );
+      }),
     );
   }
 }
@@ -416,9 +418,10 @@ class FeedTile extends StatelessWidget {
             Container(
                 padding: const EdgeInsets.symmetric(horizontal: 8.0),
                 alignment: Alignment.center,
-                child: Text(
-                  placeHolderText.substring(0, 200),
-                  textAlign: TextAlign.justify,
+                child: const Text(
+                  placeHolderText,
+                  maxLines: 4,
+                  overflow: TextOverflow.ellipsis,
                 ))
           ],
         ),

lib/src/animated_navbar.dart

@@ -94,13 +94,15 @@ class _AnimatedNavBarState extends State<_AnimatedNavBar>
   }
 
   void setUpAnimation() {
-    double offset = 75.0;
+    double offset = kNavbarHeight * 2;
     if (widget.isDesktop) {
       if (widget.decoration!.isExtended) {
         offset = widget.decoration!.minExtendedWidth;
       } else {
         offset = widget.decoration!.minWidth;
       }
+    } else {
+      offset += (widget.decoration!.margin?.vertical ?? 0) / 2;
     }
     animation = Tween(begin: 0.0, end: offset).animate(_controller);
   }
@@ -312,8 +314,9 @@ class _AnimatedNavBarState extends State<_AnimatedNavBar>
               indicatorColor: widget.decoration!.indicatorColor ??
                   theme.colorScheme.secondaryContainer,
               labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
-              indicatorShape: widget.decoration!.indicatorShape,
-              margin: widget.decoration!.margin,
+              indicatorShape: widget.decoration!.indicatorShape ??
+                  defaultDecoration.indicatorShape,
+              margin: widget.decoration!.margin ?? defaultDecoration.margin,
               showSelectedLabels: widget.decoration?.showSelectedLabels,
               selectedLabelTextStyle:
                   widget.decoration!.selectedLabelTextStyle ??
@@ -339,7 +342,7 @@ class _AnimatedNavBarState extends State<_AnimatedNavBar>
               items: widget.menuItems,
               onTap: widget.onItemTapped,
               borderRadius: widget.decoration!.borderRadius,
-              margin: widget.decoration!.margin,
+              margin: widget.decoration!.margin ?? defaultDecoration.margin,
               navBarElevation: defaultDecoration.elevation,
             );
           }
@@ -1018,8 +1021,8 @@ class FloatingNavbarState extends State<FloatingNavbar> {
           backgroundColor: widget.decoration.backgroundColor ??
               Theme.of(context).colorScheme.surface,
           elevation: widget.elevation,
-          labelTextStyle: WidgetStateProperty.all(
-              widget.decoration.selectedLabelTextStyle),
+          labelTextStyle:
+              WidgetStateProperty.all(widget.decoration.selectedLabelTextStyle),
           indicatorShape: widget.decoration.indicatorShape ??
               RoundedRectangleBorder(borderRadius: BorderRadius.circular(18.0)),
           iconTheme:

lib/src/navbar_notifier.dart

@@ -1,5 +1,3 @@
-import 'dart:async';
-
 import 'package:flutter/material.dart';
 import 'package:navbar_router/navbar_router.dart';
 
@@ -99,9 +97,8 @@ class NavbarNotifier extends ChangeNotifier {
   // pop routes from the nested navigator stack and not the main stack
   // this is done based on the currentIndex of the bottom navbar
   // if the backButton is pressed on the initial route the app will be terminated
-  static FutureOr<bool> onBackButtonPressed(
-      {BackButtonBehavior behavior =
-          BackButtonBehavior.rememberHistory}) async {
+  static bool onBackButtonPressed(
+      {BackButtonBehavior behavior = BackButtonBehavior.rememberHistory}) {
     bool exitingApp = true;
     NavigatorState? currentState = _keys[_index!].currentState;
     if (currentState != null && currentState.canPop()) {

lib/src/navbar_router.dart

@@ -338,12 +338,16 @@ class _NavbarRouterState extends State<NavbarRouter>
 
   @override
   Widget build(BuildContext context) {
-    return WillPopScope(
-        onWillPop: () async {
-          final bool isExitingApp = await NavbarNotifier.onBackButtonPressed(
+    return PopScope(
+        canPop: false,
+        onPopInvoked: (bool didPop) async {
+          if (didPop) {
+            return;
+          }
+          final bool isExitingApp = NavbarNotifier.onBackButtonPressed(
               behavior: widget.backButtonBehavior);
-          final bool value = widget.onBackButtonPressed!(isExitingApp);
-          return value;
+          widget.onBackButtonPressed!(isExitingApp);
+          _handleFadeAnimation();
         },
         child: AnimatedBuilder(
             animation: _navbarNotifier,

pubspec.yaml

@@ -1,7 +1,7 @@
 name: navbar_router
 description: A flutter package to build advanced bottomnavbar with minimal code and hassle
 
-version: 0.7.4
+version: 0.7.5
 homepage: https://github.com/maheshmnj/navbar_router
 repository: https://github.com/maheshmnj/navbar_router
 issue_tracker: https://github.com/maheshmnj/navbar_router/issues