Flutter Navigation part 1

When you are building a mobile application, mostly you will create more than one page. Then you need to handle navigation from page one to the other pages.

At this time I will show you how to navigate to another page in a simple way but, if you want to know how to manage it globally you can jump to my article here.

Flutter Navigation part 2

Setup

You can download the starter project from this link. Or you can create a new project and follow this structure of files.

In the main.dart file we use the MaterialApp widget. This widget accepts a parameter named home and we call HomePage() so when the application first runs will show the home page as default.

Now we will create new files with the names profile_page.dart and setting_page.dart to practice how navigation works. So the structure of files should be like this.

Then we finished with all files we need.

List of Routes

To handle navigation we will modify the main.dart file. We add another parameter to the MaterialApp widget named onGenerateRoute. This parameter is used to declare every page we have and what widget will show when we navigate to it by its name.

onGenerateRoute: (RouteSettings settings) {
    switch (settings.name) {
        case '/profile':
            return MaterialPageRoute(builder: (_) => ProfilePage());
        case '/setting':
            return MaterialPageRoute(builder: (_) => SettingPage());
        default:
            return MaterialPageRoute(builder: (_) => Scaffold());
    }
},

The full code for the main.dart file will be like this.

Next, modify home_page.dart to add 2 simple buttons that will navigate to each page we want like this.

You can use Navigator.pushNamed(context,'/profile'); to navigate the page from the home page to the profile page. You can move your cursor into that method and it will show the description and parameter we can pass into it. That Navigator.pushNamed function will accept BuildContext context and String routeName and optional parameter Object? arguments.

If you face any problems getting here, you can download the project from this link. You can run the application and the result will be like this.

Alternative way

What happens if we have so many pages? With the above approaches, we need to declare all possible routes in the main.dart file and it will make the file too long.

Is there a way to make it more simple? Yeah, actually we can push a new page directly when we click the button.

First, we revert changes by deleting onGenerateRoute from the main.dart file and it will look like this.

Then we change the function we call when we click the button from Navigator.pushNamed into the Navigator.push function.

We can see in the Navigator.push function will accept BuildContext context and Route<T> route as parameters, so we can pass directly the route with MaterialPageRoute.

Navigator.push(
    context,
    MaterialPageRoute(builder: (_) => const ProfilePage()),
);

For the final code, you can download it from this link. You can run the application again and the result will be the same.

Hopefully, this article can help you. If you want to know how to handle navigation globally and why you need that, you can read this article.

Flutter Navigation part 2

If you like what you read, please give me your clap 👏. Thanks for your support!