Flutter Navigation Basic to Advance: Basic Navigation [en]

Hello 👋, Finally, I am starting this series which has been on my mind for a long time. In this series, we will cover managing screen navigation in Flutter, from basic to complex levels.

I am going to cover the titles mentioned below;

• What is Navigator?
• Imperative Navigation

What is Navigator?

Before describing how to navigate between screens, let’s discuss the structure that manages screen navigation.

We can manage screen navigation between screens with the Navigator class. We can use the Navigator API to switch between different screens in the application. By using the Navigator API, we can easily switch between different screens in the application and enhance the user experience.

By using Navigator API we can do a lot of navigating processes. We can perform various navigation operations using the Navigator API.

Some of these are;

• Can navigate the different screens. Farklı bir ekrana geçiş yapabiliyor. (push)
• Can navigate back to the previous screen. (pop)
• Can manage navigation animation between screens. Ekranlar arası geçiş animasyonlarını yönetebiliyor. (PageRouteBuilder)
• Can replace a different screen with the current screen. (replace)
• Can check if a previous screen exists. (canPop)
• Can go back to a specific screen. (popUntil)
• Can navigate the different screens and remove all background previous screen stack. (pushAndRemoveUntil)

In this article, I will only cover the push and pop processes. If you have questions about any other APIs, please leave a comment.

Basic Navigation (Imperative Navigation)

Basic Navigation (DartPad)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigator Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
    );
  }
}

In the above example, you can find an example of navigating from screen A to screen B. We will only cover the part below.

            Navigator.of(context).push(
              MaterialPageRoute(builder: (context) => SecondPage()),
            );

We are calling the Navigator class that we previously mentioned using ‘Navigator.of(context)’ as seen above. Where does this class come from since we didn’t create it before? This class is created automatically under the MaterialApp widget. We can access the correct instance of the Navigator class in the widget hierarchy by using the power of context.

MaterialPageRoute is a class used to manage the transition animations of a page and provide back button functionality. This class provides the creation and management of a specific screen. The method Navigator.of(context).push() is used to navigate to another screen and the class MaterialPageRoute is used to navigate to a new screen. Additionally, the Navigator class manages screen stacks through the Overlay API.

A point to note is that you are not required to use this class for navigating to another page! The MaterialPageRoute is just a helper class that allows us to move forward on a specific skeleton. You can also manage it yourself by creating a new class derived from the Route class.

The Navigator.of(context).pop()the process is used to remove the topmost screen from the screen stack. So, we can use this process when we want to go back from the current screen to the previous screen.

I would like to note that in larger and more complex projects, you will see that the navigation method we mentioned earlier is not preferred. Instead, a named route structure is used more often. We will discuss the main reason for this in the next section.

In the next series, I will cover the following topics:

• Named Navigation
• Nested Navigation Structure
• What is Router?
• Navigation 2.0 (Declarative Navigation)
• Deeplink Navigation
• Deferred Deeplink Navigation

Navigator class

DartPad

Overlay class