Flutter: Pushing back button should allow the app to go to background when BottomSheet is Open and keep the Bootomsheet in View

问题

I have asked similar question here and based on the feedback I got, have tried few approaches, but couldn't get it working, as the original question was little old and already closed, I am posting with my new findings.

Ideally, this is what I am trying to achieve: If the Flutter Bottomsheet is open, I would like to keep it open and let the app go to background when the 'back' button is pushed, i.e. when the app is bought back I have Bottomsheet in view as is.

Have a MyApp with a root NavigationKey to start with and it opens (on default route) the RealApp with its own Key, Bottomsheet, Tabs etc. If any Tabs are pushed, clicking the 'Back' button will Pop those views. And if there aren't any more views to Pop, the default behavior of Flutter is to Pop the BottomNavigation which I am trying to override and instead want the app to go to background as is.

I tried different options including Poping the Root key from onWillPop without much Success when there are no more views to Pop.

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        navigatorKey: rootGlobalKey,
        home: RealApp()
    );
  }
}

class RealApp extends StatelessWidget {
  final navigatorKey = GlobalKey<NavigatorState>();

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  final pagesRouteFactories = {
    "/": () => MaterialPageRoute(
      builder: (context) => Center(
        child: Text(
          "HomePage",
          style: Theme.of(context).textTheme.body1,
        ),
      ),
    ),
    "takeOff": () => MaterialPageRoute(
      builder: (context) => Center(
        child: Text(
          "Take Off",
          style: Theme.of(context).textTheme.body1,
        ),
      ),
    ),
    "landing": () => MaterialPageRoute(
      builder: (context) => Center(
        child: Text(
          "Landing",
          style: Theme.of(context).textTheme.body1,
        ),
      ),
    ),
    "settings": () => MaterialPageRoute(
      builder: (context) => Center(
        child: Text(
          "Settings",
          style: Theme.of(context).textTheme.body1,
        ),
      ),
    ),
  };

  final RealBottomSheet bottomSheet = new RealBottomSheet();

  @override
  Widget build(BuildContext context) => MaterialApp(
    home: Scaffold(
      key: _scaffoldKey,
      body: _buildBody(context),
      bottomNavigationBar: _buildBottomNavigationBar(context),
    ),
  );

  Widget _buildBody(context) => WillPopScope(
      onWillPop: () async {
        if(navigatorKey.currentState.canPop()) {
          // Navigator.pop(context);
          navigatorKey.currentState.pop();
          return false;
        }else {
          // Returning true will remove BottomSheet from view, followed by moving the app to background state
          // Need a way where the BottomSheet is kept open while the app can go to background state
          // Navigator.of(context, rootNavigator: true).pop();
          rootGlobalKey.currentState.pop();
          // SystemChannels.platform.invokeMethod('SystemNavigator.pop');
          return false;
        }
      },
      child: MaterialApp(
          navigatorKey: navigatorKey,
          onGenerateRoute: (route) => pagesRouteFactories[route.name]())
  );

  Widget _buildBottomNavigationBar(context) => BottomNavigationBar(
      items: [
        _buildBottomNavigationBarItem("Home", Icons.home),
        _buildBottomNavigationBarItem("Take Off", Icons.flight_takeoff),
        _buildBottomNavigationBarItem("Landing", Icons.flight_land),
        _buildBottomNavigationBarItem("Settings", Icons.settings)
      ],
      onTap: (routeIndex) {
        if (routeIndex == 0) return routeToView(routeIndex);
        if (routeIndex == 1) return routeToView(routeIndex);
        if (routeIndex == 2) return routeToView(routeIndex);
        if (routeIndex == 3) return _showBottomSheet();
      });

  _buildBottomNavigationBarItem(name, icon) => BottomNavigationBarItem(
      icon: Icon(icon), title: Text(name), backgroundColor: Colors.black45);

  void routeToView(routeIndex) {
    navigatorKey.currentState.pushNamed(pagesRouteFactories.keys.toList()[routeIndex]);
  }

  void _showBottomSheet() {
    _scaffoldKey.currentState.showBottomSheet<void>((BuildContext context) {
      return _buildBottomSheet(context);
    });
  }

  Widget _buildBottomSheet(BuildContext context) {
    return bottomSheet;
  }
}

来源：https://stackoverflow.com/questions/57878730/flutter-pushing-back-button-should-allow-the-app-to-go-to-background-when-botto