Bram  Vanbilsen Bram Vanbilsen - 3 years ago 163
Dart Question

How to use multiple navigators

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
MaterialApp
s give funky results and I don't believe that that would be a solution.

enter image description here

Any ideas?

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download