An Introduction to Flutter Navigation

Since most apps have multiple screens, we want to find a way to move from one screen to another using Flutter.

Mobile apps use a queue to track which screen is currently being shown, and which screens have previously been shown. When you want to add a screen, you push it onto the stack. When you remove a screen, you pop it off, and the previous screen appears. This is how the back button works on your mobile device for apps.

Flutter provides navigation objects to help you move through the queue. To know how to do this, you must know that Flutter uses some special terminology. Pages and Screens are known as routes within Flutter.

In Android, a route is equivalent to an Activity. In iOS, a route is equivalent to a ViewController. In Flutter, a route is just a widget.

Building the Sample Navigation App

To build this app we’re going to need to create an app which has two routes. We’ll first create the generic first Flutter app, like we’ve done before, then move to create the routes. The project name I’m using is navigation_sample.

Once that is created, we’re going to eliminate all of that code except for the import of material.dart library, and the main function. We’ll be using both of these.

Adding the new Routes

Next we’re going to create two new routs for us to use. Remember these are just screens.

These screens are going to be nearly identical, however we’re going to call them RouteOne and RouteTwo so we can easily keep track of them. We could have just as easily called it Parent and Child, Page1 and Page2, etc. Remember variable names should be meaningful, and in this case we’re just looking for something simple to help us remember where we’re starting at, and where we’re going.

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

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

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

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

Notice that in both of these cases we are using StatelessWidgets, just to keep things easy to work with. We’d use a StatefulWidget if we needed. That also means that once again, we’re using a Widget. Remember, almost everyone on screen is a form of a Widget for Flutter – that just keeps it easy.

Also notice that this means that you won’t necessarily have all of the Widgets you use, on the screen at the same time. Some might be used for other purposes – such as navigating to later on, like how we’re going to do it.

Important!
This will not work without a MaterialApp, so don’t test now, as it will generate an error. The MaterialApp will be when we set the homepage, which is next.

Setting a Homepage

Since our main is no longer calling the right App/Widget, we’ll need to update it.

void main() {
  runApp(const MaterialApp(
    title: 'Navigation Example',
    home: RouteOne(),
  ));
}

This sets RouteOne as the initial route, or you could think of it as the homepage.

Creating a Navigation

You might have noticed that both of our Routes have a button with an onPressed attribute. This attribute has an anonymous function. Within this function call we are going to call our routing navigation.

We are going to start with the RouteOne onPressed code.

// Inside the RouteOne widget
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => RouteTwo()),
  );
}

Notice we are using Navigator.push to push the item. Likewise, notice we pass in the context, and define the MaterialPageRoute, which takes the route we want to send it.

Update your file and save it. This will perform a hot reload. Now let’s test our code.

Notice that you now navigate to a new screen. It is very similar, but you should be able to tell you are not on RouteTwo.

Now we’ll apply the code for RouteTwo’s button’s onPress event. In this case, our code is much easier, because we’re going back a level. Therefore, we only need to call pop. Once again we’ll pass context.

// Within the RouteTwo button's code
onPressed: () {
  Navigator.pop(context);
}

Save, Hot Reload, and Test, and you should be able to go forward and back within the screen.

You should have an app which allows you to navigate back and forth between the two screens (routes) that we created.

While this works, it is simple, and we will want to adjust to allow our users to navigate in more complex manners. For that, we’ll need named routes, which we will do next.

An Introduction to Flutter Navigation was originally found on Access 2 Learn