Flutter Navigator 2.0: Named routes with Drawer Navigation

Question

I'm working on a simple navigation on an app that follows Flutter Navigator 2.0 to have better support on routes. An advantage of Navigator 2.0 is that you have granular controls on screen navigations and have better support for web.

Here's a diagram of what I'm trying to achieve.

I'm able to navigate from the LoginScreen to the "main page" without issues. The main page has a Drawer that displays HomeScreen by default. My issue here is that I'm unsure on how to properly display HomeScreen and ProfileScreen from the Drawer using Navigator 2.0. Following this guide demonstrates that a screen is pushed to the Navigator stack and routes are tracked with a RouterDelegate. Doing so pushes a new screen to the stack.

The app seems to work fine, but I just removed the transition animation. You can notice that a new screen is drawn even before the Drawer can finish its closing animation. The entire Drawer widget is drawn again since the main page is pushed to the stack.

This guide on displaying screens on a Drawer only replaces the widget on the same screen. What I'm currently doing is I'm rebuilding the main page every time it navigates to HomeScreen and ProfileScreen

Here's how the main page looks like. The currentPage is updated to display the Widget for the HomeScreen and ProfileScreen.

late Widget currentPage;

@override
Widget build(BuildContext context) {
  currentPage = HomeScreen();
  return Scaffold(
    appBar: AppBar(title: Text(title)),
    body: currentPage,
    drawer: Drawer(
      child: ListView(
        children: <Widget>[
          // ...
          ListTile(
            title: Text('Home'),
            onTap: () {
              widget.navHome();
              Navigator.pop(context);
           
            },
          ),
          ListTile(
            title: Text('Profile'),
            // ...
          ),
        ],
      ),
    ),
  );
}

The Navigator on my RouterDelegate has this setup.

Navigator(
  key: navigatorKey,
  transitionDelegate: NoAnimationTransitionDelegate(),
  pages: [
    if (show404)
      MaterialPage(
        key: ValueKey('UnknownPage'),
        child: UnknownScreen(),
      )
    else if (page == Pages.home)
      MaterialPage(
        key: ValueKey('HomePage'),
        child: HomePage(
          title: 'Home',
          handleLogout: _logOut,
          navHome: _navHome,
          navProfile: _navProfile,
          currentScreen: HomeScreen(username: username),
        ),
      )
    else if (page == Pages.profile)
      MaterialPage(
        key: ValueKey('ProfilePage'),
        child: HomePage(
          title: 'Profile',
          handleLogout: _logOut,
          navHome: _navHome,
          navProfile: _navProfile,
          currentScreen: ProfileScreen(),
        ),
      )
    else // username is null, no user logged in
      MaterialPage(
        key: ValueKey('LoginPage'),
        child: LoginPage(
          title: 'Login',
          onTapped: _handleLogin,
        ),
      ),
  ]
)

The functions are passed as arguments to update the routes in the RouterDelegate.

enum Pages { login, home, profile }

class PageRouterDelegate extends RouterDelegate<PageRoutePath>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<PageRoutePath> {

  // ... Other lines omitted for simplicity

  void _handleLogin(String username, String password) {
    // TODO Auth
    this.page = Pages.home;
    notifyListeners();
  }

  void _navHome() {
    this.page = Pages.home;
    notifyListeners();
  }

  void _navProfile() {
    this.page = Pages.profile;
    notifyListeners();
  }

  void _logOut() {
    this.page = Pages.login;
    notifyListeners();
  }
}

Any suggestions on what approach can be done to display different screens from a Drawer and have their routes tracked using Navigator 2.0?

Update:

I found a solution for this issue, but it'll need to use two Navigators. Assigning keys to the Navigators helps us manage both of them.

The second Navigator is on the Home page that has a Drawer. This enables us to navigate through different pages without rebuilding the entire screen. The caveat in this approach is that only the routes on mainNavigator are displayed on the address bar on web.

Let me know if you have other suggestions on how this can be approached.

Answer 1

I gave up on using Navigator 2.0 for now due to the amount of boiler plate code that I need to write. I took a step back and used Navigator 1.0 with named routes. The same principle can still be applied to Navigator 2.0

What I did now is instead of building a different Screen on the main Navigator, I still rebuild the same screen(NavigatorPage) to save resources and pass arguments for the screen that I'd like to navigate to.

final _mainNavigatorKey = GlobalKey<NavigatorState>();
...
MaterialApp(
  title: 'Navigator Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  navigatorKey: _mainNavigatorKey,
  routes: {
    /// [title] updates the title on the main AppBar
    /// [route] NavigatorPage Router depends on route defined on this parameter
    /// [showDrawer] show/hide main AppBar drawer
    Nemo.home: (context) => NavigatorPage(
      title: 'Home',
      route: Nemo.home,
      navigatorKey: _mainNavigatorKey,
      showDrawer: true,
    ),
    Nemo.post: (context) => NavigatorPage(
      title: 'Post',
      route: Nemo.post,
      navigatorKey: _mainNavigatorKey,
      showDrawer: true),
    Nemo.profile: (context) => NavigatorPage(
      title: 'Profile',
      route: Nemo.profile,
      navigatorKey: _mainNavigatorKey,
      showDrawer: true),
    Nemo.settings: (context) => NavigatorPage(
      title: 'Settings',
      route: Nemo.settings,
      navigatorKey: _mainNavigatorKey,
      showDrawer: true),
  },
);

The NavigatorPage contains the main AppBar where we can update the title and display/hide a LinearProgressBar. From there, we can navigate to the desired Screen by checking the route passed in the arguments with the _mainNavigatorKey as our Navigator.

Navigator(
  // key: _navigatorKey,

  onGenerateRoute: (RouteSettings settings) {
    WidgetBuilder builder;
    // Manage your route names here
    // switch (settings.name) {
    switch (widget.route) {

      /// Default page displayed on Home Screen
      case Nemo.home:
        builder = (BuildContext context) => _homePage();
        break;
      case Nemo.post:
        builder = (BuildContext context) => _postPage();
        break;
      case Nemo.profile:
        builder = (BuildContext context) => _profilePage();
        break;
      case Nemo.settings:
        builder = (BuildContext context) => _settingsPage();
        break;
      default:
        builder = (BuildContext context) => const UnknownPage();
    }
    return MaterialPageRoute(
      builder: builder,
      settings: settings,
    );
  },
),

While we're still rebuilding a page on the main Navigator. A workaround for the janky animation when the Navigation Drawer is closed is to add a delay of at least 300ms to wait for the animation to finish before executing the navigation. You can adjust the delay as you see fit.

ListTile(
  title: const Text('Home'),
  onTap: () {
    // Close the drawer
    Navigator.pop(context);

    /// [drawerDelay] gives time to animate the closing of the Drawer
    Timer(Duration(milliseconds: drawerDelay), () async {
      widget.navigatorKey.currentState!.pushNamed(Nemo.home);
    });
  },
),

Demo

Sample Code

import 'dart:async';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
  final _mainNavigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // home: const NavigatorPage(title: 'Flutter Demo Home Page'),
      navigatorKey: _mainNavigatorKey,
      routes: {
        /// [title] updates the title on the main AppBar
        /// [route] NavigatorPage Router depends on route defined on this parameter
        /// [showDrawer] show/hide main AppBar drawer
        Nemo.home: (context) => NavigatorPage(
              title: 'Home',
              route: Nemo.home,
              navigatorKey: _mainNavigatorKey,
              showDrawer: true,
            ),
        Nemo.post: (context) => NavigatorPage(
            title: 'Post',
            route: Nemo.post,
            navigatorKey: _mainNavigatorKey,
            showDrawer: true),
        Nemo.profile: (context) => NavigatorPage(
            title: 'Profile',
            route: Nemo.profile,
            navigatorKey: _mainNavigatorKey,
            showDrawer: true),
        Nemo.settings: (context) => NavigatorPage(
            title: 'Settings',
            route: Nemo.settings,
            navigatorKey: _mainNavigatorKey,
            showDrawer: true),
      },
    );
  }
}

class NavigatorPage extends StatefulWidget {
  const NavigatorPage(
      {Key? key,
      required this.title,
      required this.route,
      required this.navigatorKey,
      required this.showDrawer})
      : super(key: key);

  final String title;
  final String route;
  final bool showDrawer;
  final GlobalKey<NavigatorState> navigatorKey;

  @override
  State<NavigatorPage> createState() => _NavigatorPageState();
}

class _NavigatorPageState extends State<NavigatorPage> {
  // final _navigatorKey = GlobalKey<NavigatorState>();
  /// Drawer delay let's us have the Navigation Drawer close first
  /// before the navigating to the next Screen
  int drawerDelay = 300;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      drawer: widget.showDrawer
          ? Drawer(
              /// TODO return null to hide Drawer if in Login/Registration page
              // Add a ListView to the drawer. This ensures the user can scroll
              // through the options in the drawer if there isn't enough vertical
              // space to fit everything.
              child: ListView(
                // Important: Remove any padding from the ListView.
                padding: EdgeInsets.zero,
                children: <Widget>[
                  const DrawerHeader(
                    decoration: BoxDecoration(
                      color: Colors.blue,
                    ),
                    child: Text('Drawer Header'),
                  ),
                  ListTile(
                    title: const Text('Home'),
                    onTap: () {
                      // Close the drawer
                      Navigator.pop(context);

                      /// [drawerDelay] gives time to animate the closing of the Drawer
                      Timer(Duration(milliseconds: drawerDelay), () async {
                        widget.navigatorKey.currentState!.pushNamed(Nemo.home);
                      });
                    },
                  ),
                  ListTile(
                    title: const Text('Profile'),
                    onTap: () {
                      // Close the drawer
                      Navigator.pop(context);

                      Timer(Duration(milliseconds: drawerDelay), () async {
                        widget.navigatorKey.currentState!
                            .pushNamed(Nemo.profile);
                      });
                    },
                  ),
                  ListTile(
                    title: const Text('Settings'),
                    onTap: () {
                      // Close the drawer
                      Navigator.pop(context);

                      Timer(Duration(milliseconds: drawerDelay), () async {
                        widget.navigatorKey.currentState!
                            .pushNamed(Nemo.settings);
                      });
                    },
                  ),
                ],
              ),
            )
          : null,
      body: Navigator(
        // key: _navigatorKey,

        /// initialRoute needs to be set to '/'
        onGenerateRoute: (RouteSettings settings) {
          WidgetBuilder builder;
          // Manage your route names here
          // switch (settings.name) {
          switch (widget.route) {

            /// Default page displayed on Home Screen
            case Nemo.home:
              builder = (BuildContext context) => _homePage();
              break;
            case Nemo.post:
              builder = (BuildContext context) => _postPage();
              break;
            case Nemo.profile:
              builder = (BuildContext context) => _profilePage();
              break;
            case Nemo.settings:
              builder = (BuildContext context) => _settingsPage();
              break;
            default:
              builder = (BuildContext context) => const UnknownPage();
          }
          return MaterialPageRoute(
            builder: builder,
            settings: settings,
          );
        },
      ),
    );
  }

  Widget _homePage() =>
      HomePage(title: 'Home', navigatorKey: widget.navigatorKey);
  Widget _postPage() =>
      PostPage(title: 'Post', navigatorKey: widget.navigatorKey);
  Widget _profilePage() =>
      ProfilePage(title: 'Profile', navigatorKey: widget.navigatorKey);
  Widget _settingsPage() =>
      SettingsPage(title: 'Settings', navigatorKey: widget.navigatorKey);
}

class Nemo {
  static const home = '/';
  static const login = '/login';
  static const register = '/register';
  static const post = '/post';
  static const profile = '/profile';
  static const settings = '/settings';
}

/// Constant values for UI elements
class Constants {
  static const String webVersion = 'web-0.1.9-dev';
  static const double paddingSmall = 8.0;
  static const double paddingNormal = 16.0;

  static const double heightNormal = 64.0;

  static const double heightThreadCard = 72.0;
  static const double heightButtonNormal = 42.0;

  static const double widthButtonNormal = 160.0;
}

class UnknownPage extends StatefulWidget {
  const UnknownPage({Key? key}) : super(key: key);

  @override
  State<UnknownPage> createState() => _UnknownPageState();
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key, required this.title, required this.navigatorKey})
      : super(key: key);
  final String title;
  final GlobalKey<NavigatorState> navigatorKey;

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text(widget.title),
      // ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Home',
            ),
            ElevatedButton(
              child: const Text('View Post Page'),
              onPressed: () {
                widget.navigatorKey.currentState!.pushNamed(Nemo.post);
              },
            ),
          ],
        ),
      ),
    );
  }
}

class PostPage extends StatefulWidget {
  const PostPage(
      {Key? key, required this.title, this.id, required this.navigatorKey})
      : super(key: key);

  final String title;
  final String? id;
  final GlobalKey<NavigatorState> navigatorKey;

  @override
  State<PostPage> createState() => _PostPageState();
}

class _PostPageState extends State<PostPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text(widget.title),
      // ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Id from Route: ${widget.id}',
            ),
          ],
        ),
      ),
    );
  }
}

class SettingsPage extends StatefulWidget {
  const SettingsPage(
      {Key? key, required this.title, required this.navigatorKey})
      : super(key: key);
  final String title;
  final GlobalKey<NavigatorState> navigatorKey;

  @override
  State<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text(widget.title),
      // ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Settings',
            ),
            ElevatedButton(
              child: const Text('View Details'),
              onPressed: () {
                widget.navigatorKey.currentState!.pushNamed(Nemo.post);
              },
            ),
          ],
        ),
      ),
    );
  }
}

class ProfilePage extends StatefulWidget {
  const ProfilePage({Key? key, required this.title, required this.navigatorKey})
      : super(key: key);
  final String title;
  final GlobalKey<NavigatorState> navigatorKey;

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text(widget.title),
      // ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Profile',
            ),
            ElevatedButton(
              child: const Text('View Details'),
              onPressed: () {
                widget.navigatorKey.currentState!.pushNamed(Nemo.post);
              },
            ),
          ],
        ),
      ),
    );
  }
}

class _UnknownPageState extends State<UnknownPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text(widget.title),
      // ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(
              '404',
            ),
          ],
        ),
      ),
    );
  }
}

If you'd like to have a sample with basic Login and Register Screen included. I've created this template that you can check: https://github.com/omatt/flutter-navdrawer-template