Flutter – Navigate From One Screen to Another

Flutter apps may have multiple screens or pages. Pages are groups of functionalities. The user navigates between different pages to use different functionalities. Concepts like pages are called routes in Flutter. We can use Navigator.push() to navigate to a new route and Navigator.pop() to navigate to the previous route. Routes are managed by the Navigator widget. The navigator manages a stack of routes. Routes can be pushed on the stack using push() method and popped off the stack using pop() method. The top element in the stack is the currently active route. Navigator is a stateful widget with NavigatorState as its state. In this article, we will see how to navigate from one screen to another screen in Flutter.

How to use:

Navigator class has a push method to Navigate to the next screen.

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

A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the material package

Adding material package that gives us the important functions and calls the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';
void main() {
   runApp(RunMyApp(home: RunMyApp(),debugShowCheckedModeBanner: false,
     theme: ThemeData(primarySwatch: Colors.green),)
));
}

Step 3: Create the first screen or Home screen RunMyApp

Dart

class RunMyApp extends StatelessWidget {
  RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Home Page'),
        ),
        body: Center(
          child:

              ElevatedButton(
                  onPressed: () {

                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) =>
                                NextPage()));
                  },
                  child: Text('Goto Next Page')),

        ),

    );
  }
}

Created a stateless class because there are no changes to do, Which returns the scaffold that allows us to set the AppBar and body. Body contains the Center widget which has the Elevated Button that further has the onPressed property. Navigator class has a method push to navigate to the next screen.

Step 4: Create a Second Screen or NextPage

Dart

class NextPage extends StatelessWidget {

  const NextPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Next Page'),),
      body: Center(
        child: Text('GeeksForGeeks'),
      ),
    );
  }
}

NextPage Screen contains the Scaffold which allows us to set the AppBar and body. Body contains a center widget that has text as a child.

Final Code 

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: RunMyApp(),debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),));
}

class RunMyApp extends StatelessWidget {
  RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Home Page'),
        ),
        body: Center(
          child:

              ElevatedButton(
                  onPressed: () {

                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) =>
                                NextPage()));
                  },
                  child: Text('Goto Next Page')),
        ),

    );
  }
}

class NextPage extends StatelessWidget {

  const NextPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Next Page'),),
      body: Center(
        child: Text('GeeksForGeeks'),
      ),
    );
  }
}

Output: