Working with Named Routes in Flutter

Now that we’ve seen the basics of Flutter navigation, we want to add to our capabilities.

We are going to keep going off of our last example with the two screens to navigate between. However, we will be changing some things.

Updating our main

In our main file, we currently create our app, and set an initial screen. However, here, we will define some named routes. This will allow us to call the navigation a little easier, and be cleaner for web based purposes.

The initial change will be to the creation of the MaterialApp. We will add named routes, an initial route, and remove the home property.

void main() {
  runApp(MaterialApp(
    title: 'Navigation Example',
    initialRoute: '/',
    routes: {
      // When navigating to the "/" route, go to the RouteOne widget.
      '/': (context) => const RouteOne(),
      // When navigating to the "/second" route, go to the RouteTwo widget.
      '/second': (context) => const RouteTwo(),
    },
  ));
}

If you notice, we no longer have const MaterialApp(...). That is because using routes doesn’t allow for the const.

Notice that our home property has been removed. That’s because we’ve added initialRoute as /, this is from the defined routes. You should not have a home property and an initial route as it could cause issues.

Our routes can be named what ever we need/want them to be. In both cases, we see how we move to one of our Widgets we created earlier.

Updating the Navigation

On our RouteOne widget, we will need to update our onPressed event. Now our navigation will still work, but it is not using the benefit of the named routes.

onPressed: () {
            // Navigate to second route/screen when tapped/clicked.
            Navigator.pushNamed(context, '/second');
          },

Notice how this code is shorter, because we can go to the named route. If we were to change the name of the route, we’d also need to change/add it here.

If you save and do a hot reload, you will notice that this still works just as it did before.

Notice that you didn’t have to change the onPressed even in RouteTwo. You still use the pop method to return there.

Adding a New Route

If you want to add a new Page/Screen, i.e. Route, you need to add a Widget for it, and then update the Route list within the main function.

To do this, we will copy The RouteTwo Widget to make a third Widget for a new Route. We’ll update it as you see below.

class RouteThree extends StatelessWidget {
  const RouteThree({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("The Third Route/Screen"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate back to first route/screen when tapped/clicked.
            Navigator.pop(context);
          },
          child: Text('Go back to Previous Screen!'),
        ),
      ),
    );
  }
}

Next we’ll add the links for the Routes as you see in the main below.

void main() {
  runApp(MaterialApp(
    title: 'Navigation Example',
    initialRoute: '/',
    routes: {
      // When navigating to the "/" route, go to the RouteOne widget.
      '/': (context) => const RouteOne(),
      // When navigating to the "/second" route, go to the RouteTwo widget.
      '/second': (context) => const RouteTwo(),
      '/third': (context) => const RouteThree(),
    },
  ));
}

If we save and hot reload this, there is one obvious thing missing. We having created a link to the third route. So we will now update the RouteOne, to include a second button, which routes to the third screen. Notice the updated build method.

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Our First Route'),
        ),
        body: Center(
          child: Column(children: [
            ElevatedButton(
              child: Text('Open New Screen!'),
              onPressed: () {
                // Navigate to second route/screen when tapped/clicked.
                Navigator.pushNamed(context, '/second');
              },
            ),
            ElevatedButton(
              child: Text('Open Third Screen!'),
              onPressed: () {
                // Navigate to second route/screen when tapped/clicked.
                Navigator.pushNamed(context, '/third');
              },
            ),
          ]),
        ));
  }

Organizing Files

While these screens have been fairly simple, we’ve seen how even a simple screen can get fairly complex, fairly quickly.

Therefore, to allow a separation of work if you are on a team, and/or better logically organize your source, you might want to export out your routes/screens to external files.

This is fairly easy luckily.

First, create a new file in the lib/ folder of your project. Name it screens.dart.

Second, in this new file, you will need to import your materials.dart file, just like you do in the main.dart file.

Third, move your code for your RouteTwo and RouteThree Widgets, and place them in the new screens.dart file. Save this file.

Finally, at the top of the main.dart file, you will need to import your new screens.dart file. This is similar to importing the materials file, however, it is simpler because you don’t have to specify package, or a path, since it is in your project.

import 'screens.dart';

Save your files, and do a hot reload, and you project should work, just as it did before.

Working with Named Routes in Flutter was originally found on Access 2 Learn