Flutter Navigation: How to Navigate Different Screens in Flutter

In Android terms, our screens would have new Activities. In iOS terms, we have new ViewControllers. In Flutter, screens are just Widgets! So how do we navigate to new screens? The answer is using the Navigator class! 

Flutter Navigation

A multi-page application is one where we create multiple screens with their widgets, with one of them being displayed at any point in time. Most of the time, the screens are displayed based on user interactions with the app, which is achieved using navigation functionalities.

Navigation is the key part of the UX for any mobile application. Due to the limited screen on mobile devices, users will always navigate between different screens, such as a list to a detailed screen, from the shopping cart to the checkout screen, from the menu into a form, and many other cases. Good navigation helps users find their way around and get a sense of the breadth of your app.

The iOS navigation experience is often built around the UINavigationController, which uses the stack-based shifting between screens. On Android, an Activity stack is the central means to navigate the user between different screens. Unique transitions between screens in these stacks can help give your app a unique feel.

Navigator class

It is the widget that manages a set of child widgets with a stack discipline. For example, mobile apps typically reveal their contents via full-screen elements called “screens” or “pages.” In Flutter, these elements are called routes, and they’re managed by a Navigator widget. The navigator leads a stack of Route objects and provides methods for controlling the stack, like Navigator.push and Navigator.pop.

Navigator.push

It pushes the given route onto the navigator that most tightly encloses the given context. The syntax is following.

Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => MyPage()));

Navigator.pop

It pops the top-most route off the navigator that most tightly encloses the given context. The syntax is following.

Navigator.pop(context);

Let us take a simple example to see Flutter Navigation Example in action.

Step 1: Create a Flutter project.

If you do not know how to create a brand new flutter project, please check out my How To Install Flutter article; we can create a new project from Visual Studio Code.

Now, create one folder inside the lib folder called pages and create two screens inside that folder.

1. HomeScreen.dart
2. SecondScreen.dart

Step 2: Code the SecondScreen.dart file.

Write the following code inside the SecondScreen.dart file. Here, I am going to explain the reverse flow of this demo. So first, we are coding the SecondScreen.dart file. So bare with me, and you will understand the flow of this project.

// SecondScreen.dart

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Back To HomeScreen'),
          color: Theme.of(context).primaryColor,
          textColor: Colors.white,
          onPressed: () => Navigator.pop(context)
        ),
      ),
    );
  }
}

On this page, we have taken the StatelessWidget because we do not need the StatefulWidget cause no data here to be managed.

This is our SecondScreen, and here, when the user presses the button, we will go to one step back of the screen. Then, we pop the route from the stack and get back to the previous route.

In our case, it is a HomeScreen.dart page that we will navigate after we click the Back To HomeScreen button. So let us code that file.

Step 3: Code the HomeScreen.dart file.

Write the following code inside the HomeScreen.dart file.

// HomeScreen.dart

import 'package:flutter/material.dart';

import './SecondScreen.dart';

class HomeScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
          child: RaisedButton(
              child: Text('Go to Second Screen'),
              color: Theme.of(context).primaryColor,
              textColor: Colors.white,
              onPressed: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) => SecondScreen(),
                  )))),
    );
  }
}

This is our HomeScreen, and the first screen appears when the app is compiled.

This screen is also the Stateless Widget because we do not have any state to manage. Now, here also, we have taken the RaisedButton widget.

When the user clicks that button, we call the Navigator.push() method and pass the context and MaterialPageRoute parameters.

The MaterialPageRoute() widget also takes one function argument called the builder, and in that argument, we need to pass our destination page to which we need to navigate. In our case, it is a second screen, so we have created an instance of SecondScreen, and we have also imported that screen at the top of the file.

So, when the user clicks on the Go to second screen button, we will navigate to the SecondScreen, and when the user clicks the SecondScreen’s button, we will navigate to this screen which is HomeScreen.

The final step is to code the main.dart file.

// main.dart

import 'package:flutter/material.dart';

import './pages/HomeScreen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.deepPurple), home: HomeScreen());
  }
}

We are setting the first screen of the App as a HomeScreen. So we are importing the HomeScreen.dart file inside the main.dart file and pass that instance to the home property, and now we can see the HomeScreen as the first screen of the app.

Open both iOS and Android Simulators and start the compilation using the following command.

flutter run -d all

You can see the HomeScreen like this.

Click on the button, and you can see the SecondScreen like this.

That’s it for this tutorial. Thanks for taking it.