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
Flutter - Pass Data One Screen To Another Screen In this article we gonna know how you can pass the data from one screen to another screen in Flutter. In this example we took two screens one and screen two, In the first screen, you enter the data, and that data you can see on your second screen. This is the main object of this application. If we t
4 min read
Flutter - Pass a Function as an Argument From One Screen to Another In Flutter, you can pass a function as an argument from one screen (widget) to another screen (widget) by defining a callback function and passing it as an argument when navigating or pushing to the new screen. Here's a step-by-step guide on how to do this: Required Tools To build this app, you need
4 min read
Flutter - Return Data from Screen Interaction with UI is an essential part of any application. During the same, there might be a need to return data from the screen. This kind of interaction can range from selecting an option to navigating to different routes through the various buttons in the UI. In this article, we will explore th
4 min read
How to Import Data From One Page to Another in Flutter? Flutter is Google’s Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), Web apps from a single codebase. When building applications with Flutter everything towards Widgets – the blocks with which the flutter apps are built. They are structural elements that ship with a bunch
5 min read
Flutter - Animated Navigation By default, Flutter has no animation when navigating from one Screen to another Screen. But in this tutorial, we are going to learn how to animate the Screen Transition. Project Setup Before directly applying to your existing project, practice the code in some example projects. For this tutorial, we
4 min read