title: Use nested Navigator with WillPopScope in Flutter
body: <p>In my application, I want to have a custom Navigation (only change part of the screen and keep an history of what I'm doing inside it).
  For that purpose, I am using a Navigator and it's working fine for simple navigation.
  However, I want to handle the back button of Android.
  There is a problem with it in Flutter apparently which forces me to handle the backbutton in the parent widget of the Navigator :
  <a href="https://github.com/flutter/flutter/issues/14083" rel="noreferrer">https://github.com/flutter/flutter/issues/14083</a></p>
  
  <p>Due to that, I need to retrieve the instance of my Navigator in the children and call pop() on it. I am trying to use a GlobalKey for this.</p>
  
  <p>I am trying to make it work for a while now and made a sample project just to test this.
  Here is my code :</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  void main() {
    runApp(MaterialApp(title: 'Navigation Basics', home: MainWidget()));
  }
  
  class MainWidget extends StatelessWidget {
    final GlobalKey&lt;NavigatorState&gt; navigatorKey = GlobalKey();
  
    @override
    Widget build(BuildContext context) {
      return SafeArea(
          child: WillPopScope(
              onWillPop: () =&gt; navigatorKey.currentState.maybePop(),
              child: Scaffold(
                  body: Padding(
                child: Column(
                  children: &lt;Widget&gt;[
                    Text("Toto"),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: &lt;Widget&gt;[
                        Expanded(
                            child: RaisedButton(
                          child: Text('First'),
                          onPressed: () {
                            navigatorKey.currentState.pushNamed('/first');
                            // Navigator.push(
                            //   context,
                            //   MaterialPageRoute(builder: (context) =&gt; SecondRoute()),
                            // );
                          },
                        )),
                        Expanded(
                            child: RaisedButton(
                          child: Text('Second'),
                          onPressed: () {
                            navigatorKey.currentState.pushNamed('/second');
                          },
                        ))
                      ],
                    ),
                    Expanded(
                        child: Stack(
                      children: &lt;Widget&gt;[
                        Container(
                          decoration: BoxDecoration(color: Colors.red),
                        ),
                        ConstrainedBox(
                            constraints: BoxConstraints.expand(),
                            child: _getNavigator()),
                      ],
                    )),
                  ],
                ),
                padding: EdgeInsets.only(bottom: 50),
              ))));
    }
  
    Navigator _getNavigator() {
      return Navigator(
          key: navigatorKey,
          initialRoute: '/',
          onGenerateRoute: (RouteSettings settings) {
            WidgetBuilder builder;
            switch (settings.name) {
              case '/':
                builder = (BuildContext _) =&gt; FirstRoute();
                break;
              case '/second':
                builder = (BuildContext _) =&gt; SecondRoute();
                break;
              default:
                throw new Exception('Invalid route: ${settings.name}');
            }
            return new MaterialPageRoute(builder: builder, settings: settings);
          });
    }
  }
  
  class FirstRoute extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(
        child: Column(
          children: &lt;Widget&gt;[
            RaisedButton(
              child: Text("GO TO FRAGMENT TWO"),
              onPressed: () =&gt; Navigator.of(context).pushNamed("/second"),
            )
          ],
        ),
        decoration: BoxDecoration(color: Colors.green),
      );
    }
  }
  
  class SecondRoute extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(
        child: Column(
          children: &lt;Widget&gt;[
            RaisedButton(
              child: Text("GO TO FRAGMENT ONE"),
              onPressed: () =&gt; Navigator.of(context).pop(),
            )
          ],
        ),
        decoration: BoxDecoration(color: Colors.blue),
      );
    }
  }
  </code></pre>
  
  <p>This is however not working as I would like. The default Navigator seem to still be used : after opening the SecondRoute and pressing the Android back button, it just leaves the app instead of just going back to the first route.</p>
  
  <p>How can I achieve what I want?</p>