Flutter persistent navigation bar with named routes?

flutter bottom navigation bar
flutter bottom navigation bar color
flutter bottom navigation bar example
flutter navigation bar
flutter bottom navigation bar github
flutter bottom navigation bar 5 items
flutter bottom navigation bar keep state
flutter bottom navigation bar keyboard

I've been searching around for a good navigation/router example for Flutter but I have not managed to find one.

What I want to achieve is very simple:

  1. Persistent bottom navigation bar that highlights the current top level route
  2. Named routes so I can navigate to any route from anywhere inside the app
  3. Navigator.pop should always take me to the previous view I was in

The official Flutter demo for BottomNavigationBar achieves 1 but back button and routing dont't work. Same problem with PageView and TabView. There are many other tutorials that achieve 2 and 3 by implementing MaterialApp routes but none of them seem to have a persistent navigation bar.

Are there any examples of a navigation system that would satisfy all these requirements?

All of your 3 requirements can be achieved by using a custom Navigator.

The Flutter team did a video on this, and the article they followed is here: https://medium.com/flutter/getting-to-the-bottom-of-navigation-in-flutter-b3e440b9386

Basically, you will need to wrap the body of your Scaffold in a custom Navigator:

class _MainScreenState extends State<MainScreen> {
  final _navigatorKey = GlobalKey<NavigatorState>();

  // ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        key: _navigatorKey,
        initialRoute: '/',
        onGenerateRoute: (RouteSettings settings) {
          WidgetBuilder builder;
          // Manage your route names here
          switch (settings.name) {
            case '/':
              builder = (BuildContext context) => HomePage();
              break;
            case '/page1':
              builder = (BuildContext context) => Page1();
              break;
            case '/page2':
              builder = (BuildContext context) => Page2();
              break;
            default:
              throw Exception('Invalid route: ${settings.name}');
          }
          // You can also return a PageRouteBuilder and
          // define custom transitions between pages
          return MaterialPageRoute(
            builder: builder,
            settings: settings,
          );
        },
      ),
      bottomNavigationBar: _yourBottomNavigationBar,
    );
  }
}

Within your bottom navigation bar, to navigate to a new screen in the new custom Navigator, you just have to call this:

_navigatorKey.currentState.pushNamed('/yourRouteName');

To achieve the 3rd requirement, which is Navigator.pop taking you to the previous view, you will need to wrap the custom Navigator with a WillPopScope:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: WillPopScope(
      onWillPop: () async {
        if (_navigatorKey.currentState.canPop()) {
          _navigatorKey.currentState.pop();
          return false;
        }
        return true;
      },
      child: Navigator(
        // ...
      ),
    ),
    bottomNavigationBar: _yourBottomNavigationBar,
  );
}

And that should be it! No need to manually handle pop or manage a custom history list.

Navigate with named routes, Create two screens. Define the routes. Navigate to the second screen using Navigator.pushNamed() . Return to the first screen using Navigator.pop  The solution is to define a named route, and use the named route for navigation. To work with named routes, use the Navigator.pushNamed() function. This example replicates the functionality from the original recipe, demonstrating how to use named routes using the following steps: Create two screens. Define the routes.

What you are asking for would violate the material design specification.

On Android, the Back button does not navigate between bottom navigation bar views.

A navigation drawer would give you 2 and 3, but not 1. It depends on what's more important to you.

You could try using LocalHistoryRoute. This achieves the effect you want:

class MainPage extends StatefulWidget {
  @override
  State createState() {
    return new MainPageState();
  }
}

class MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  List<int> _history = [0];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Bottom Nav Back'),
      ),
      body: new Center(
        child: new Text('Page $_currentIndex'),
      ),
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: _currentIndex,
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
            icon: new Icon(Icons.touch_app),
            title: new Text('keypad'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.assessment),
            title: new Text('chart'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.cloud),
            title: new Text('weather'),
          ),
        ],
        onTap: (int index) {
          _history.add(index);
          setState(() => _currentIndex = index);
          Navigator.push(context, new BottomNavigationRoute()).then((x) {
            _history.removeLast();
            setState(() => _currentIndex = _history.last);
          });
        },
      ),
    );
  }
}

class BottomNavigationRoute extends LocalHistoryRoute<void> {}

Flutter Bottom Navigation Bar example with Route to another Page , What we want is for each tab to have its own navigation stack. On lines 1–4, we define two route names: / and /detail; On line 7, we define the  Flutter Navigation – Named Routes Posted on March 24, 2018 December 20, 2018 Author joe 3 Comments This is the third article of a multi-part series where we will focus on how to navigate within a Flutter app.

CupertinoTabBar behave exactly same as you described, but in iOS style. It can be used in MaterialApps however.

Sample Code

Flutter Case Study: Multiple Navigators with BottomNavigationBar, Tutorial for building an app with Flutter, Google's exciting new cross-platform SDK. For example, we are going to be using a bottom navigation bar and The “_” in front of the class names is how Dart marks classes or class  This article introduces basic concepts of page navigation and routes in Flutter. From this article, we'll learn how to perform page navigation using Navigator.push and Navigator.pop. This article also shows how to pass data between pages. Navigation using named routes is also covered.

How to use Flutter to build an app with bottom navigation, In Flutter, we have a bottomNavigationBar of a Scaffold . Tap Right item inside bottom navigation bar, go to screen B port3000 mentioned this issue on Apr 4, 2018 For example, each "Tab" has its own routing state. When you create an app with Flutter, you have to do “routing” in most cases. the bottom tab is commonly persistent above nested routes rather than inside pages. the bottom navigation

Keep BottomNavigationBar When Push to New Screen with , In this Google flutter code example we are going to learn how to route to a new page from Bottom How to route to a new page from Bottom Navigation Bar in Flutter type: BottomNavigationBarType.fixed, items: <BottomNavigationBarItem​>[  How to get current route path in Flutter, when the routing is rewinding to root? routing navigation flutter. Flutter persistent navigation bar with named routes? 0.

How to route to a new page from Bottom Navigation Bar in Flutter, So, in the second method, the page is created once but added as a route in the entry point of the app, main.dart . These routes are named like  Today we are going to learn about routes and navigation. In Flutter, navigation is built in. It is simple, quick and intuitive to use. By the end of this post, you will learn how to use the

Comments
  • did you find any solution for your question?
  • @Daniel.V No I didn't. I ended up using BottomNavigationBar to achieve 1, ditched requirement no. 2 and manually handled pop so that I could always navigate back to the root view of the current tab. The open source scene has evolved since then so there might be new libraries that might achieve at least 1 and 2.
  • This is something I want to achieve even if it violates some arbitrary design rule. Even the official Youtube app navigate between bottom nav bar views when pressing the back button. Same goes for Spotify and pretty much all big apps out there.
  • Each tap push a Navigation stack, but never removed.
  • They are removed by the Android back button, as requested by the question.
  • I got it working by extending Route instead of LocalHistoryRoute