Flutter - Navigation to Previous Screen using GetX Library Function
Last Updated :
14 Apr, 2025
When we are using any app then we do navigation to navigate between screens. Sometimes, we want to return to the previous screen, so we normally use Navigator.pop(context). This is using context, and sometimes we find shortcuts to do the task easily. For that, we haveGet.back()in flutter. We can send the result to the previous route and do the operations.
Syntax:
Get.back()
You can also send a result back to the previous screen:
Get.back(result: "Returned Data");
Step By Step Implementation
Step 1: Create a new Flutter Application
Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.
flutter create app_name
To know more about it refer this article: Creating a Simple Application in Flutter
Step 2: Adding the Dependency
To add the dependency to the pubspec.yaml file, add get as a dependency in the dependencies part of the pubspec.yaml file, as shown below:
Dart
dependencies:
flutter:
sdk: flutter
get: ^4.7.2
Now run the below command in the terminal.
flutter pub get
Or
Run the below command in the terminal.
flutter pub add get
Step 3: Import dependencies
To use libraries, import all of them in the respective .dart file,
import 'package:get/get.dart';
Step 4: Implementing Get.back()
Now, write code to implement Get.back(). For that, we should have two screens. and first, we navigate to a new screen and get back to the previous screen with some data.
Simple Navigation Back
Example:
Dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
// Entry point of the Flutter application
void main() {
runApp(MyApp());
}
// Root widget of the application
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue), // Application theme
home: Page1(), // Initial screen of the app
debugShowCheckedModeBanner: false,
);
}
}
// First page of the application
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GeekforGeeks GFG"),
centerTitle: true, // Centers the title
backgroundColor: Colors.green,
foregroundColor: Colors.white, // Text color of the AppBar
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center, // Centers the content vertically
children: [
Text("Page 1", textScaleFactor: 2), // Displays "Page 1" text
Container(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white
),
child: Text("Navigate to next screen"),
onPressed: () {
Get.to(Page2()); // Navigates to Page2
},
),
),
],
),
),
);
}
}
// Second page of the application
class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GeekforGeeks GFG"),
backgroundColor: Colors.green,
foregroundColor: Colors.white, // Text color of the AppBar
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center, // Centers the content vertically
children: [
Text("Page 2", textScaleFactor: 2), // Displays "Page 2" text
Container(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white
),
child: Text("Navigate to previous screen"),
onPressed: () => Get.back(), // Navigates back to the previous screen
),
),
],
),
),
);
}
}
Output: In this, we are not sending any status get after returned back. We are simply getting back using Get.back().
Return Data Using Get.back(result: ...)
Example:
Dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
// Entry point of the Flutter application
void main() {
runApp(MyApp());
}
// Root widget of the application
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue, // Theme color
),
home: Page1(), // Initial screen of the app
debugShowCheckedModeBanner: false,
);
}
}
// First page of the application
class Page1 extends StatefulWidget {
@override
_Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> {
String? x; // Variable to store data returned from Page2
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GeekforGeeks GFG"),
centerTitle: true, // Centers the title
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center, // Centers content vertically
children: [
Text(
"Page 1",
textScaleFactor: 2, // Scales the text size
),
Container(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
child: Text("Navigate to next screen"),
onPressed: () async {
// Navigates to Page2 and waits for the result
x = await Get.to(Page2());
setState(() {
// Updates the UI with the returned data
});
},
),
),
Text(
x ?? x.toString(), // Displays the returned data or null
textScaleFactor: 2, // Scales the text size
),
],
),
),
);
}
}
// Second page of the application
class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GeekforGeeks GFG"),
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
body: Center(
child: Column(
mainAxisAlignment:MainAxisAlignment.center, // Centers content vertically
children: [
Text(
"Page 2",
textScaleFactor: 2, // Scales the text size
),
Container(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
child: Text("Navigate to previous screen"),
onPressed:
() => Get.back(
result:
"Data after returning to first page", // Data sent back to Page1
),
),
),
],
),
),
);
}
}
Output:
In this, we are sending results back to the homepage using Get.back( result: "Data after returning to first page"). And receiving result usingx= await Get.to(Page2()); in First page.
Similar Reads
Flutter - Navigation to Next Screen using GetX Library Function When we want to navigate between the screens in flutter then we use Navigator in Flutter. It uses context and builders for navigation. Sometimes, we pass the data to the next screen and fetch data on the next screen. When we use Navigator in flutter then its syntax is very large and it's not a good
3 min read
Flutter - Navigating Through Gesture on Images 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
5 min read
Flutter - GetX State Management Library GetX is a fast, stable, and light state management library in Flutter that simplifies the process of managing and updating the state of your application. It is an alternative to other state management libraries in Flutter like MobX, BLoC, Redux, Provider, etc. GetX is also a powerful micro framework
5 min read
Flutter - Preserve Scroll Position of ListView Using Page Storage In this article, we will learn How to Preserve the Scroll Position of Listview Using Page Storage. So let's get started. Step By Step Implementation Step 1: Building main.dart page We have built an AppbarThe elevated button is used with help of which we will navigate to the next page MyList where 10
4 min read
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
3 min read
Flutter - Send Data to Screen using RouteSettings Interaction with the UI is an integral part of any application. But more often than not, the information needs to be sent from one screen to another. For instance, say you need to pass data regarding a selected or tapped component of the UI to another route(i.e., page). In this article, we will expl
4 min read