Flutter Navigation Between Two Pages

In this tutorial, we will learn how to navigate between two screens.

We shall learn two steps in navigation. They are:

  1. Loading second screen from first screen.
  2. Returning to first screen from second screen.

To load a new screen, we can use Navigator.push() and to return back to the previous screen, we can use Navigator.pop().

Example

In this example, we have two screens/pages, they are: MyHomePage and MySecondPage which extend StatefulWidget. They both have different state classes.

In MyHomePage, we shall place a button and when this button is pressed, we shall navigate to second screen, MySecondPage.

In MySecondPage, we shall place a RaisedButton and when this button is pressed, we shall navigate back to the first screen MyHomePage.

main.dart

</>
Copy
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class MySecondPage extends StatefulWidget {
  @override
  _MySecondPageState createState() => _MySecondPageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home - TutorialKart'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => MySecondPage()),
            );
          },
        ),
      ),
    );
  }
}

class _MySecondPageState extends State<MySecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go back to Home Screen'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Run this application and you should get the first and second screen as shown below.

Flutter Navigation from One screen to Another

Complete Project

You can find the complete code at – Github – TutorialKart – Flutter – Navigation Example.

Conclusion

In this Flutter Tutorial, we learned how to navigate between two screens/pages using Navigator.push() and Navigator.pop().