Flutter and Dart Cookbook

Chapter 12. Flutter Page Navigation

In this chapter, we look at how to perform common page navigation techniques. Page navigation is a very common use case for developers. Fortunately, Flutter makes much of this interface building easy for us.

So far the discussion has focused on building an application with a single page. However, you will now likely want to expand beyond this base case to allow navigation between multiple pages. To get started, we focus on common navigation patterns you will come across as a Flutter developer. You will learn how to:

• Use routes to move between pages

• Add a navigation draw widget

• Add a tab interface widget

• Add a bottom navigation widget

• Pass data using keys

Being able to move between pages using in-built navigation will make your applications look more professional. Flutter provides a number of ways to navigate between information pages, so it is worth knowing how to incorporate these into your own applications. By the end of this chapter you will have covered the basics of general page navigation using routes.

12.1 Adding Page Navigation with Routes (Imperative)

Problem

You want a way to move between multiple pages using specific navigational instructions.

Solution

Use Flutter navigation. Flutter navigation uses routes, which provide the mechanism to traverse between pages. A route refers to the address of the page to be accessed. Routing between pages requires the use of a MaterialPageRoute, which is used to push a new page on ...