title: Flutter WillPopScope for nested Navigation
body: <p>I have Flutter App with nested Navigator and I want to override &quot;onBackPressed&quot; using <code>WillPopScope</code> in my nested screen.</p>
  <p>Let's say I have <code>MainScreen</code>, <code>PrimaryScreen</code>, and <code>SecondaryScreen</code>.
  <code>PrimaryScreen</code> is nested Navigator, it have several screen like <code>PrimaryOneScreen</code>, <code>PrimaryTwoScreen</code>, and <code>PrimaryThreeScreen</code>.</p>
  <p><code>SecondaryScreen</code> is also a nested Navigator, just like <code>PrimaryScreen</code>, it have 3 screens.</p>
  <p>Here the illustration of what i want to achieve</p>
  <p><code>MainScreen</code> -&gt; <code>PrimaryScreen</code>(<code>PrimaryOneScreen</code> -&gt; <code>PrimaryTwoScreen</code> -&gt; <code>PrimaryThreeScreen</code>)</p>
  <p>When my position on <code>PrimaryTwoScreen</code>, I want to get back to <code>PrimaryOneScreen</code> with overriding &quot;onBackPressed&quot; using <code>WillPopScope</code> Widget. But <code>onWillPop</code> never called when I press back button, and my screen go back directly to <code>MainScreen</code>.</p>
  <p>Here are my codes</p>
  <p>MainScreen.dart</p>
  <pre><code>class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          // This is the theme of your application.
          //
          // Try running your application with &quot;flutter run&quot;. You'll see the
          // application has a blue toolbar. Then, without quitting the app, try
          // changing the primarySwatch below to Colors.green and then invoke
          // &quot;hot reload&quot; (press &quot;r&quot; in the console where you ran &quot;flutter run&quot;,
          // or simply save your changes to &quot;hot reload&quot; in a Flutter IDE).
          // Notice that the counter didn't reset back to zero; the application
          // is not restarted.
          primarySwatch: Colors.blue,
        ),
        home: MainApp(),
        onGenerateRoute: (settings){
          WidgetBuilder builder;
          switch(settings.name){
            case 'primary' :
              builder = (BuildContext _) =&gt; PrimaryScreen();
              break;
            case 'secondary' :
              builder = (BuildContext _) =&gt; SecondaryScreen();
              break;
            case 'main' :
              builder = (BuildContext _) =&gt; MainApp();
              break;
            default :
              throw Exception('Invalid route: ${settings.name}');
          }
  
          return MaterialPageRoute(
              builder: builder,
              settings: settings
          );
        },
      );
    }
  }
  
  
  class MainApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Column(
          children: &lt;Widget&gt;[
            FlatButton(
              onPressed: (){
                Navigator.pushNamed(context, 'primary');
              },
              child: Text('To Page Primary'),
            ),
            FlatButton(
              onPressed: (){
                Navigator.pushNamed(context, 'secondary');
              },
              child: Text('To Page Secondary'),
            )
          ],
        ),
      );
    }
  
  }
  </code></pre>
  <p>PrimaryScreen.dart</p>
  <pre><code>class PrimaryScreen extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
      return Navigator(
          initialRoute: 'primary/pageone',
          onGenerateRoute: (RouteSettings settings){
            WidgetBuilder builder;
            switch(settings.name){
              case 'primary/pageone' :
                builder = (BuildContext _) =&gt; PrimaryOneScreen();
                break;
              case 'primary/pagetwo' :
                builder = (BuildContext _) =&gt; PrimaryTwoScreen();
                break;
              case 'primary/pagethree' :
                builder = (BuildContext _) =&gt; PrimaryThreeScreen();
                break;
              default :
                throw Exception('Invalid route: ${settings.name}');
            }
  
            return MaterialPageRoute(
                builder: builder,
                settings: settings
            );
          },
        );
    }
  
  }
  </code></pre>
  <p>PrimaryOneScreen.dart</p>
  <pre><code>class PrimaryOneScreen extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Primary Page'),
        ),
        body: Center(
          child: Column(
            children: &lt;Widget&gt;[
             FlatButton(
                onPressed: (){
                  Navigator.pushNamed(context, 'primary/pagetwo');
                },
                child: Text('To Page Two'),
              ),
              FlatButton(
                onPressed: (){
                  Navigator.pushNamed(context, 'primary/pagethree');
                },
                child: Text('To Page Three'),
              ),
            ],
          ),
        ),
      );
    }
  
  }
  </code></pre>
  <p>PrimaryTwoScreen.dart</p>
  <pre><code>class PrimaryTwoScreen extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
      return WillPopScope(
        onWillPop: ()async{
          print('willPopScope');
          Navigator.of(context, rootNavigator: false).pop();
          return true;
        },
        child: Scaffold(
          appBar: AppBar(
            title: Text('Secondary Page'),
          ),
          body: Center(
            child: Column(
              children: &lt;Widget&gt;[
                FlatButton(
                  onPressed: (){
                    Navigator.pushNamed(context, 'primary/pageone');
                  },
                  child: Text('To Page One'),
                ),
                FlatButton(
                  onPressed: (){
                    Navigator.pushNamed(context, 'primary/pagethree');
                  },
                  child: Text('To Page Three'),
                ),
              ],
            ),
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>PrimaryThreeScreen.dart</p>
  <pre><code>class PrimaryThreeScreen extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Primary Page'),
        ),
        body: Center(
          child: Column(
            children: &lt;Widget&gt;[
              FlatButton(
                onPressed: (){
                  Navigator.pushNamed(context, 'primary/pageone');
                },
                child: Text('To Page One'),
              ),
              FlatButton(
                onPressed: (){
                  Navigator.pushNamed(context, 'primary/pagetwo');
                },
                child: Text('To Page Two'),
              )
            ],
          ),
        ),
      );
    }
  
  }
  </code></pre>
  <p><strong>EDIT</strong>
  I added an image to illustrate what I want to achieve.
  <a href="https://i.stack.imgur.com/RPQuO.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/RPQuO.jpg" alt="enter image description here" /></a></p>
  <p>How to pop only on nested navigator?</p>
  <p>Thanks!</p>