How to get current route path in Flutter?

Question

While implementing persistent bottom bar, previous route need to be restored when a button in the bottom bar was clicked.

When a button in the bottom bar is clicked, its current route path (/a/b/c) is saved and previously saved route is restored according to the button click.

Conceptually user will think each button as a workspace and its state is never get lost (including back stack). User can safely switch from one workspace to another.

How to get current route path in Flutter, when the routing is rewinding to root?

Answer 1

This should give you the exact route name

ModalRoute.of(context).settings.name

if you use Navigator.popuntil.. check this other answer out by Rémi Rousselet https://stackoverflow.com/a/50817399/5921185

Answer 2

NavigatorState doesn't expose an API for getting the path of the current route, and Route doesn't expose an API for determining a route's path either. Routes can be (and often are) anonymous. You can find out if a given Route is on the top of the navigator stack right now using the isCurrent method, but this isn't very convenient for your use case.

I would recommend that you take a different approach to this problem and don't rewind to the root at all. Instead, use a different Navigator widget for each pane of the BottomNavigationBar. That way, you won't have to rewind the stack when switching between panes. You can wrap your Navigator widgets in Opacity and IgnorePointer widgets to hide them when they aren't supposed to be visible without destroying their stack.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class SecurePage extends StatelessWidget {
  final int index;

  SecurePage(this.index);

  Widget build(BuildContext context) {
    return new Material(
      color: Colors.amber,
      child: new InkWell(
        child: new Center(
          child: new Icon(
            Icons.security,
            color: Colors.white,
            size: index * 100.0 + 20.0,
          ),
        ),
        onTap: () {
          Navigator.of(context).push(
            new MaterialPageRoute(
              builder: (BuildContext context) {
                return new SecurePage(index + 1);
              },
            ),
          );
        },
      ),
    );
  }
}

class VerifiedPage extends StatelessWidget {
  final int index;

  VerifiedPage(this.index);

  Widget build(BuildContext context) {
    return new Material(
      color: Colors.green,
      child: new InkWell(
        child: new Center(
          child: new Icon(
            Icons.verified_user,
            color: Colors.white,
            size: index * 100.0 + 20.0,
          ),
        ),
        onTap: () {
          Navigator.of(context).push(
            new MaterialPageRoute(
              builder: (BuildContext context) {
                return new VerifiedPage(index + 1);
              },
            ),
          );
        },
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  int _page = 0;
  List<Widget> initialWidgets = <Widget>[
    new SecurePage(0),
    new VerifiedPage(0),
  ];

  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: new List<Widget>.generate(initialWidgets.length, (int index) {
          return new IgnorePointer(
            ignoring: index != _page,
            child: new Opacity(
              opacity: _page == index ? 1.0 : 0.0,
              child: new Navigator(
                onGenerateRoute: (RouteSettings settings) {
                  return new MaterialPageRoute(
                    builder: (_) => initialWidgets[index],
                  );
                },
              ),
            ),
          );
        }),
      ),
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: _page,
        onTap: (int index) {
          setState(() {
            _page = index;
          });
        },
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
            icon: new Icon(Icons.security),
            title: new Text('Secure'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.verified_user),
            title: new Text('Verified'),
          ),
        ],
      ),
    );
  }
}

Answer 3

Posting this answer mainly for archival purposes, but as @ikben mentioned, one way to get the current route, and all its properties, is ModalRoute.of(context). This returns a ModalRoute, which despite its name, applies to most Navigator.push calls, not just showDialog. Helpful properties include Route.settings, Route.navigator, and Route.isFirst.

Answer 4

In case if you want to get current route by use navigator key, possible to use popUntil method for it:

String? currentPath;
navigatorKey.currentState?.popUntil((route) {
  currentPath = route.settings.name;
  return true;
}); 

Answer 5

I found a much simpler solution. I love StatelessWidget's so I did it with a static, but you can do it with a StatefulWidget. You'll need a StatefulWidget if you have hierarchical navigation. This is a tile in my NavDrawer. (Statics get a bad rap but in a UI it's not bad, there's only one process running a single thread.)

class NavListTile extends StatelessWidget {
  static String currentRoute = 'dashboard';
  final String route;

  const NavListTile({
    Key? key,
    required this.route,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var isCurrent = currentRoute == route;
    String suffix = isCurrent ? '_green' : '';
    return ListTile(
      title: NavMenuItem(capitalizedRoute, isCurrent,
          "assets/images/" + route + suffix + ".png", context),
      onTap: () {
        currentRoute = route;
        Navigator.of(context).pushNamed('/' + route);
      },
    );
  }
}