Go One screen to Another Screen Using Navigator in Flutter
Route creation: A route can be created in the form of a “Class” in Dart using object oriented concepts. Each step can be written as a separate class and has its own content and UI.
Navigating to the page: Now that we have defined the homepage, all that remains is another route to navigate from the homepage to the application. For this purpose, the Navigator gadget has a method called Navigator.push(). This method pushes the route to the top of the home page, thereby displaying a second route. The code to push the route onto the stack is as follows:
GestureDetector(
child: Text("Click Me"),
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context)=>First()));
},
)Navigation back home: Now we have reached our destination, but how do we get back home? For this, the navigator has a method called Navigator.pop(). This helps us remove the current route from the stack so that we return to our parent route. This can be done as follows:
GestureDetector(
child: Text("Second"),
onTap: (){
Navigator.pop(context);
},
)PushReplacement is a method used for navigation, especially when you want to replace the current route (or screen) with a new one. Instead of pushing the new screen above the current one (which the previous screen keeps in memory), it removes the current screen from the navigation set and pushes the new one in its place. This means you can no longer go back to the previous screen when using pushReplacement.
GestureDetector(
child: Text("First"),
onTap: () {
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => Second()));
},
),Complete Code Below you see:
Main.dart
import 'package:firstproject/First.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: [
GestureDetector(
child: Text("Click Me"),
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context)=>First()));
},
)
]));
}
}
First.dart
import 'package:firstproject/Second.dart';
import 'package:flutter/material.dart';
class First extends StatefulWidget {
const First({super.key});
@override
State<First> createState() => _FirstState();
}
class _FirstState extends State<First> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
child: Text("First"),
onTap: () {
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => Second()));
},
),
);
}
}Second.dart
import 'package:flutter/material.dart';
class Second extends StatefulWidget {
const Second({super.key});
@override
State<Second> createState() => _SecondState();
}
class _SecondState extends State<Second> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
child: Text("Second"),
onTap: (){
Navigator.pop(context);
},
),
);
}
}