Flutter - Navigate From One Screen to Another
Last Updated :
28 Apr, 2025
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:
Similar Reads
AVL Tree Data Structure An AVL tree defined as a self-balancing Binary Search Tree (BST) where the difference between heights of left and right subtrees for any node cannot be more than one. Balance Factor = left subtree height - right subtree heightFor a Balanced Tree(for every node): -1 ≤ Balance Factor ≤ 1Example of an
4 min read
Python Match Case Statement Introduced in Python 3.10, the match case statement offers a powerful mechanism for pattern matching in Python. It allows us to perform more expressive and readable conditional checks. Unlike traditional if-elif-else chains, which can become unwieldy with complex conditions, the match-case statement
7 min read
Flutter Tutorial This Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Google’s mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When
7 min read
RJ45 Color Code Pre-requisites: RJ Full Form RJ45 is a well-known ethernet connectivity connector that allows users to connect through wired internet. there are other ports also which do the same, but RJ45 is widely used and most common in wired internet connection interfaces. It is an ethernet cable consisting of
3 min read
History of Operating System An operating system is a type of software that acts as an interface between the user and the hardware. It is responsible for handling various critical functions of the computer and utilizing resources very efficiently so the operating system is also known as a resource manager. The operating system
8 min read
Introduction to Monotonic Stack - Data Structure and Algorithm Tutorials A monotonic stack is a special data structure used in algorithmic problem-solving. Monotonic Stack maintaining elements in either increasing or decreasing order. It is commonly used to efficiently solve problems such as finding the next greater or smaller element in an array etc.Monotonic StackTable
12 min read
What is Fragmentation in Operating System? The process of dividing a computer file, such as a data file or an executable program file, into fragments that are stored in different parts of a computer's storage medium, such as its hard disc or RAM, is known as fragmentation in computing. When a file is fragmented, it is stored on the storage m
8 min read
Single Layer Perceptron in TensorFlow Single Layer Perceptron is inspired by biological neurons and their ability to process information. To understand the SLP we first need to break down the workings of a single artificial neuron which is the fundamental building block of neural networks. An artificial neuron is a simplified computatio
4 min read
Static Member Function in C++ The static keyword is used with a variable to make the memory of the variable static once a static variable is declared its memory can't be changed. To know more about static keywords refer to the article static Keyword in C++. Static Member in C++ Static members of a class are not associated with t
4 min read
Spring Boot - Transaction Management Using @Transactional Annotation The @Transactional annotation is the metadata used for managing transactions in the Spring Boot application. To configure Spring Transaction, this annotation can be applied at the class level or method level. In an enterprise application, a transaction is a sequence of actions performed by the appli
9 min read