[Bug]: Android physical back button exits the app

[bugrevealingbme]

Version

5.2.3

Flutter Doctor Output

--

What platforms are you seeing the problem on?

Android, iOS

What happened?

I have 2 problems.
1- If I click on the current tab, it returns to the previous tab. This problem came after an update.
2- If I go to the next page with the navbar (Navigator.push), Android's return button takes me directly out of the application. I'm using GoRouter (if I go with gorouter without navbar there is no problem, but this time there is no navbar).

Steps to reproduce

1- If I click on the current tab, it returns to the previous tab. This problem came after an update.
2- If I go to the next page with the navbar (Navigator.push), Android's return button takes me directly out of the application. I'm using GoRouter (if I go with gorouter without navbar there is no problem, but this time there is no navbar).

Code to reproduce the problem

PersistentTabView(
                  controller: persistentTabController,
                  hideNavigationBar: viewModel.splashView,
                  navBarBuilder: (p0) =>
                      buildBottomAppBar(t, context, themeData, viewModel),
                  tabs: viewModel.viewList,
                  onTabChanged: (value) {
                    viewModel.currentIndex = value;
                    viewModel.currentIndexNotify.value = value;
                  },
                  //screenTransitionAnimation: const ScreenTransitionAnimation.none(),
                  handleAndroidBackButtonPress: true,
                  resizeToAvoidBottomInset: false,
                )

making handleAndroidBackButtonPress false will not solve the problem. This time my function to click on the same tab is not working.

Relevant log output

No response

Screenshots

No response

[bugrevealingbme]

IMG_3829.mp4

[jb3rndt]

Hi, I see the issue you are having and I want to solve it.

Unfortunately, I need more information to be able to reproduce this specific behavior to then investigate what causes it. There are so many parts involved that currently I can only randomly guess what is going wrong.
So please provide a minimal reproducible example (a file, that I can run as is, without the need to adjust anything) that triggers this behavior. Boiling down your application to the least code necessary to showcase the problem might need some work on your side - I am sorry for that - (especially the contents of the screens are unnecessary).
If you have issues with that, a good approach is to take the example app from this project and iteratively add some code fragments of your app.

If I click on the current tab, it returns to the previous tab. This problem came after an update.

Can you please specify which update caused that? What was the old version?

[jiqimao3528]

Hi, I see the issue you are having and I want to solve it.

Unfortunately, I need more information to be able to reproduce this specific behavior to then investigate what causes it. There are so many parts involved that currently I can only randomly guess what is going wrong. So please provide a minimal reproducible example (a file, that I can run as is, without the need to adjust anything) that triggers this behavior. Boiling down your application to the least code necessary to showcase the problem might need some work on your side - I am sorry for that - (especially the contents of the screens are unnecessary). If you have issues with that, a good approach is to take the example app from this project and iteratively add some code fragments of your app.

If I click on the current tab, it returns to the previous tab. This problem came after an update.

Can you please specify which update caused that? What was the old version?

@jb3rndt
Hi, I simulated the code, you need to replace the main.dart code in your example with the following code to reproduce the bug.

import "package:example/interactive_example.dart";
import "package:example/screens.dart";
import "package:flutter/material.dart";
import "package:flutter/services.dart";
import "package:persistent_bottom_nav_bar_v2/persistent_bottom_nav_bar_v2.dart";

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // make navigation bar transparent
  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent,
    ),
  );
  // make flutter draw behind navigation bar
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  runApp(const PersistenBottomNavBarDemo());
}

class PersistenBottomNavBarDemo extends StatelessWidget {
  const PersistenBottomNavBarDemo({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: "Persistent Bottom Navigation Bar Demo",
        home: Builder(
          builder: (context) => Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ElevatedButton(
                  onPressed: () =>
                      Navigator.of(context).pushReplacementNamed("/minimal"),
                  child: const Text("Show Minimal Example"),
                ),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () =>
                      Navigator.of(context).pushNamed("/interactive"),
                  child: const Text("Show Interactive Example"),
                ),
              ],
            ),
          ),
        ),
        routes: {
          "/minimal": (context) => const MinimalExample(),
          "/interactive": (context) => const InteractiveExample(),
        },
      );
}

class MinimalExample extends StatelessWidget {
  const MinimalExample({super.key});

  List<PersistentTabConfig> _tabs() => [
        PersistentTabConfig(
          screen: const MainScreen(),
          item: ItemConfig(
            icon: const Icon(Icons.home),
            title: "Home",
          ),
        ),
        PersistentTabConfig(
          screen: const MainScreen(),
          item: ItemConfig(
            icon: const Icon(Icons.message),
            title: "Messages",
          ),
        ),
        PersistentTabConfig(
          screen: const MainScreen(),
          item: ItemConfig(
            icon: const Icon(Icons.settings),
            title: "Settings",
          ),
        ),
      ];

  @override
  Widget build(BuildContext context) => PersistentTabView(
        tabs: _tabs(),
        navBarBuilder: (navBarConfig) => Style1BottomNavBar(
          navBarConfig: navBarConfig,
        ),
        avoidBottomPadding: true,
        backgroundColor: Colors.white,
        handleAndroidBackButtonPress: false,
        resizeToAvoidBottomInset: true,
        stateManagement: true,
        popAllScreensOnTapOfSelectedTab: false,
        popActionScreens: PopActionScreensType.all,
        screenTransitionAnimation: const ScreenTransitionAnimation.none(),
      );
}

Thanks~

[jb3rndt]

Hi, thank you for providing some code. Unfortunately, I dont see how this reproduces the issues mentioned by @bugrevealingbme. When setting handleAndroidBackButton: true like @bugrevealingbme did, I cannot reproduce any of the described behavior.

[bugrevealingbme]

My application is too big so I can't share a code. However, if it is convenient for you, I can have my codes reviewed by remote connection

[bugrevealingbme]

I think this problem is related to gorouter

[lukehutch]

This is an issue with new versions of Flutter and Android, because of the introduction of predictive back gestures, which is changing the whole way the back button is handled in Android. Basically if your app doesn't support predictive back gestures yet, then hitting Back will pop the whole app (close the app). Took me forever to figure this out.

Here is the issue: flutter/flutter#135654

Here is the way I solved it -- call navigatorPop rather than Navigator.of(context).pop:

/// Used for obtaining a global [NavigatorState].
final navigatorKey = GlobalKey<NavigatorState>();

/// Get the global [NavigatorState] (for opening modals).
NavigatorState get navigator {
  final navigatorState = navigatorKey.currentState;
  if (navigatorState == null) {
    // Should not happen as long as there is a Navigator in the router
    throw 'navigatorKey.currentState is null';
  }
  return navigatorState;
}

/// Pop the current route if possible.
bool navigatorPop<T>([T? result]) {
  if (navigatorKey.currentState?.canPop() ?? false) {
    navigatorKey.currentState!.pop(result);
    return true;
  }
  return false;
}

Basically this pops the top modal or route, but then stops popping when there are no more routes or modals left to pop within the app. Then at that point, if you hit Back one more time, the app will pop.

Then in your MaterialApp use:

      navigatorKey: navigatorKey,

[jb3rndt]

Is there anything this package can do differently to reduce problems with the predictive back?

[lukehutch]

I wish I had an answer to that question, but all the information I could find about this fundamental change was hazy at best. The Flutter issue link is a good place to start. Manually handling Back events with the code I shared solved the problem for me.

There is one other thing: there is an Android manifest value that can be set to enable predictive back, and if you enable that, the regular back event doesn't even reach Flutter. So there must be an actual API for predictive back that needs to be implemented.

Sorry, a lot of this is guesswork, or fuzzy memories, and I don't have time to go back and research this again!

[jb3rndt]

Thanks for the reply and the investigation.

Unfortunately, I still dont entirely understand where the problem comes from. Can you confirm that the example of this repo works as inteded for you? If so, what is different in your application that requires the code patch you posted above? (Lets ignore the android manifest value to enable predictive back).

Basically if your app doesn't support predictive back gestures yet, then hitting Back will pop the whole app (close the app).

In which case does an app not support predictive back? When the app uses the deprecated WillPopScope?

[lukehutch]

In which case does an app not support predictive back? When the app uses the deprecated WillPopScope?

No, I wasn't using WillPopScope, but at some point I was dealing with the whole app being popped whenever Back was pressed. Unfortunately it was so long ago that I don't remember if I even got to the bottom of why this was happening in my app and not other apps. I did not have the new predictive back enablement attribute set in the Android manifest at the time.

I do know that at one point, I was using the following code, appropriately hooked into MaterialApp IIRC, but I ended up replacing it with the code I gave previously instead, with the same effect. Without one of these two fixes, the whole app would pop.

/// Make back button close any open dialogs first, and only pop the route
/// if there are no dialogs open. (Default behavior is to pop the app on
/// every back button press)
class FixedBackButtonDispatcher extends RootBackButtonDispatcher {
  @override
  Future<bool> didPopRoute() async {
    // Close any open modal dialog before attempting to pop route
    if (navigatorKey.currentState?.canPop() ?? false) {
      navigatorKey.currentState!.pop();
      return true;
    }
    // Pop route, or pop app if at top level
    return super.didPopRoute();
  }
}

I wish I could help further but my app has evolved far past the point where I was dealing with this, and I just don't remember any other details.

[bugrevealingbme]

Could this be related?

https://docs.flutter.dev/release/breaking-changes/android-predictive-back#migrating-from-willpopscope-to-navigatorpophandler-for-nested-navigators

flutter/flutter#140296

[bugrevealingbme]

Applying pageTransitionsTheme solved my problem.

return MaterialApp(
  theme: ThemeData(
    brightness: Brightness.light,
    pageTransitionsTheme: const PageTransitionsTheme(
      builders: {
        // Use PredictiveBackPageTransitionsBuilder to get the predictive back route transition!
        TargetPlatform.android: PredictiveBackPageTransitionsBuilder(),
      },
    ),
  ),
  home: const MyApp(),
);