5

I currently have a MaterialApp in my flutter application which makes the use of the Navigator extremely easy, which is great. But, I'm now trying to figure out how to create more navigators for particular views/widgets. For example I've got a custom tab bar with another widget/view in. I'd now like that widget/view to have it's own navigation stack. So the goal is to keep the tab bar at the top while I navigate to other pages from within my widget/view.
This question is almost exactly this: Permanent view with navigation bar in Flutter but in that code, there is no MaterialApp yet. Nesting MaterialApps give funky results and I don't believe that that would be a solution.
enter image description here

Any ideas?

Bram Vanbilsen
  • 5,763
  • 12
  • 51
  • 84

2 Answers2

8

You can create new Navigator for each page. As a reference check CupertinoTabView

Or simple example:

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  Navigator _getNavigator(BuildContext context) {
    return new Navigator(
      onGenerateRoute: (RouteSettings settings) {
        return new MaterialPageRoute(builder: (context) {
          return new Center(
            child: new Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                new Text(settings.name),
                new FlatButton(
                  onPressed: () =>
                      Navigator.pushNamed(context, "${settings.name}/next"),
                  child: new Text('Next'),
                ),
                new FlatButton(
                  onPressed: () =>
                      Navigator.pop(context),
                  child: new Text('Back'),
                ),
              ],
            ),
          );
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[
          new Expanded(
            child: _getNavigator(context),
          ),
          new Expanded(
            child: _getNavigator(context),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(new MaterialApp(
    home: new Home(),
  ));
}

Screenshot

German Saprykin
  • 6,631
  • 2
  • 29
  • 26
  • I actually know about the `TabView` but that's not what I meant. I'd actually like to have a navigation stack for each tab page in my tabbar, any idea how that can be accomplished? – Bram Vanbilsen Sep 30 '17 at 13:28
  • One more question, when I'm in my second level navigator (So the one not created by my `MaterialApp`) how can I make the back button work? It just closes the app for me :/ – Bram Vanbilsen Sep 30 '17 at 21:05
  • @BramVanbilsen, if it's your own button, check what Navigator you use. You should take the "second" one, not "main". If it's scaffold's button, make sure scaffold is placed in scope of "second" Navigator. – German Saprykin Oct 01 '17 at 03:32
  • Also see [this related question](https://stackoverflow.com/questions/46483949/how-to-get-current-route-path-in-flutter). – Kyaw Tun Oct 01 '17 at 06:55
  • @Mogol Woops, should have mentioned that I was talking about the hardware Android back button. Any idea about that? – Bram Vanbilsen Oct 01 '17 at 09:18
  • I guess you can take a look [here](https://docs.flutter.io/flutter/widgets/WidgetsBinding/handlePopRoute.html) – German Saprykin Oct 01 '17 at 13:25
  • How can I push something to the „root“ navigator when iam in the scope of another navigator? Navigator.of targets the closest navigator that encloses the given context, not the root navigator. Any ideas? – C. Mürtz Jun 02 '18 at 21:27
  • You could use GlobalKey for root navigator. E.g. check answer https://stackoverflow.com/questions/50303441/flutter-redux-navigator-globalkey-currentstate-returns-null – German Saprykin Jun 03 '18 at 05:27
  • @Chris you can access the root navigator like this: Navigator.of(context, rootNavigator: true) – Tobika Sep 18 '18 at 07:42
0

you could give first material app's context to secondary material app;
and in secondary material app ,when you need to go back first material app,
you could check whether the secondary app can pop, with this line:

 Navigator.of(secondaryContext).canPop()

if true, then you could keep using,else use first material app's context,
like this:

Navigator.of(parentContext).pop();

otherwise

Ershat
  • 29
  • 4