This article will tell you how to exit App with Flutter by clicking the Back button twice, how to implement multiple routes in App, and how to implement the Back button to exit only the specified page.

WillPopScope

WillPopScope is used to process whether or not to leave the current page. There are many ways to leave the current page in Flutter, such as the back button on AppBar and CupertinoNavigationBar. Clicking on the back button will return you to the previous page. Clicking the physical (virtual) back button on an Android phone will also take you back to the previous page, a feature that iOS programmers can easily overlook.

We will use WillPopScope in the following situations:

1. You need to ask the user whether to log out.
2. There are multiple Navigators in the App, and you want to exit one of them, rather than the Navigator at the bottom of the Widget Tree.

Ask the user whether to exit

Clicking the back button at the beginning of the Android App will close the current activity and return to the desktop by default. We hope that a dialog box or a prompt “Click exit again” will pop up at this time to avoid user misoperation.

WillPopScope(
    onWillPop: () async => showDialog(
        context: context,
        builder: (context) =>
            AlertDialog(title: Text('Are you sure you want to quit? '), actions: <Widget>[
              RaisedButton(
                  child: Text('exit'),
                  onPressed: () => Navigator.of(context).pop(true)),
              RaisedButton(
                  child: Text('cancel'),
                  onPressed: () => Navigator.of(context).pop(false)),
            ])),
    child: Container(
      alignment: Alignment.center,
      child: Text('Click the back button and ask if you want to quit. ')))Copy the code

We can also make it a quick two-click exit:

DateTime _lastQuitTime;
WillPopScope(
    onWillPop: () async {
      if (_lastQuitTime == null ||
          DateTime.now().difference(_lastQuitTime).inSeconds > 1) {
        print('Press the Back button again to exit');
        Scaffold.of(context)
            .showSnackBar(SnackBar(content: Text('Press the Back button again to exit')));
        _lastQuitTime = DateTime.now();
        return false;
      } else {
        print('exit');
        Navigator.of(context).pop(true);
        return true;
      }
    },
    child: Container(
      alignment: Alignment.center,
      child: Text('Click the back button and ask if you want to quit. ')))Copy the code

There are multiple Navigators in the App

Our App is usually under the MaterialApp and CupertinoApp, the MaterialApp and CupertinoApp themselves have a Navigator, So the default is to call navigator. pop or navigator. push to manipulate the Navigator. However, there are some situations where we would like to have our own Navigator, such as the following scenario:

• There is a resident bar at the bottom of the page that displays content, and this resident bar needs its own Navigator.
• When using TabView, BottomNavigationBar, and CupertinoTabView, you want to have multiple tabs, but each Tab has its own navigation behavior. In this case, you need to add a Navigator to each Tab.

Home page:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  GlobalKey<NavigatorState> _key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WillPopScope(
          onWillPop: () async {
            if (_key.currentState.canPop()) {
              _key.currentState.pop();
              return false;
            }
            return true;
          },
          child: Column(
            children: <Widget>[
              Expanded(
                child: Navigator(
                  key: _key,
                  onGenerateRoute: (RouteSettings settings) =>
                      MaterialPageRoute(builder: (context) {
                    return OnePage();
                  }),
                ),
              ),
              Container(
                height: 50,
                color: Colors.blue,
                alignment: Alignment.center,
                child: Text('the Bar at the bottom of the'() [() () [() () ( }}Copy the code

First page:

class OnePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: RaisedButton(
            child: Text('Go to the next page'),
            onPressed: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) {
                returnTwoPage(); })); },),),),); }}Copy the code

Second page:

class TwoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: Text('This is the second page.'),),),); }}Copy the code

The same principle applies to TabView, BottomNavigationBar, and CupertinoTabView. Just add a Navigator to each Tab and don’t forget to specify the key.

communication

Old Meng Flutter blog address (nearly 200 controls usage) : laomengit.com