Flutter - Passing Multiple Data with GetX
Last Updated :
03 May, 2025
GetX is a state management library for Flutter that provides a simple and powerful way to manage the state of your application. It provides various features like State management, Routing, etc. Passing back the Data from the Second Screen to the First Screen involves State Management. To achieve this most simply, here we are going to take the help of the Flutter GetX package for state management.
In this article, we are going to create two screens First, we are navigating to the second screen then from the second screen we are going to send the Data to the first Screen with the help of the GetX library. A Demo video is given below to get an idea about what we are going to do in this article.
Demo Video:
,
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 following 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 command below in the terminal.
flutter pub get
Or
Run the command below in the terminal.
flutter pub add get
Step 3: Import the Package
First of all, import the material.dart and get.dart package.
import 'package:flutter/material.dart';
import 'package:get/get.dart';
Step 4: Execute the main Method
Here, the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
Step 5: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'GetX Navigation Example',
theme: ThemeData(primarySwatch: Colors.green),
debugShowCheckedModeBanner: false,
initialBinding: BindingsBuilder(() {
// Bind the Controller to the Get instance
Get.put(Controller());
}),
home: Screen1(),
);
}
}
Step 6: Create Controller Class
The Controller class is a GetX controller, which plays a crucial role in managing and observing the state of the application.It has a RxString to Observe the changes occur the the String. Comments are added for better understanding.
Dart
class Controller extends GetxController {
// RxString to observe changes in the text
RxString textFromScreen2 = ''.obs;
}
Step 7: Create Screen1 Class
In this class we are going to create Screen1 with a Text that displayed the data receive from the second screen and a Button by pressing which we can navigate to the second screen. Comments are added for better understandings.
Dart
class Screen1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen 1'),
backgroundColor: Colors.black87,
foregroundColor: Colors.white,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GetX<Controller>(
builder: (controller) {
return Text(
'Text from Screen 2: ${controller.textFromScreen2.value}',
style: TextStyle(fontWeight: FontWeight.bold),
);
},
),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black87,
foregroundColor: Colors.white,
),
onPressed: () {
// Navigate to Screen 2
Get.to(() => Screen2());
},
child: Text('Go to Screen 2'),
),
],
),
),
);
}
}
Step 8: Create Screen2 Class
In this class, we are going to create Screen2 with a TextField to take input text and a Button to go back to Screen1. Comments are added for better understanding.
Dart
class Screen2 extends StatelessWidget {
final TextEditingController textEditingController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen 2'),
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
body: Padding(
padding: const EdgeInsets.all(16.0), // Fixed zero padding
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: textEditingController,
decoration: InputDecoration(
labelText: 'Enter Text',
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
),
),
),
SizedBox(height: 16),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
onPressed: () {
// explicit Controller type
Get.find<Controller>().textFromScreen2.value = textEditingController.text;
// Go back to Screen 1
Get.back();
},
child: Text('Save and Go back to Screen 1'),
),
],
),
),
),
);
}
}
Complete Source Code
main.dart:
main.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'GetX Navigation Example',
theme: ThemeData(primarySwatch: Colors.green),
debugShowCheckedModeBanner: false,
initialBinding: BindingsBuilder(() {
// Bind the Controller to the Get instance
Get.put(Controller());
}),
home: Screen1(),
);
}
}
class Controller extends GetxController {
// RxString to observe changes in the text
RxString textFromScreen2 = ''.obs;
}
class Screen1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen 1'),
backgroundColor: Colors.black87,
foregroundColor: Colors.white,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GetX<Controller>(
builder: (controller) {
return Text(
'Text from Screen 2: ${controller.textFromScreen2.value}',
style: TextStyle(fontWeight: FontWeight.bold),
);
},
),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black87,
foregroundColor: Colors.white,
),
onPressed: () {
// Navigate to Screen 2
Get.to(() => Screen2());
},
child: Text('Go to Screen 2'),
),
],
),
),
);
}
}
class Screen2 extends StatelessWidget {
final TextEditingController textEditingController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen 2'),
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: textEditingController,
decoration: InputDecoration(
labelText: 'Enter Text',
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
),
),
),
SizedBox(height: 16),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
onPressed: () {
// explicit Controller type
Get.find<Controller>().textFromScreen2.value = textEditingController.text;
// Go back to Screen 1
Get.back();
},
child: Text('Save and Go back to Screen 1'),
),
],
),
),
),
);
}
}
Output:
Similar Reads
Persist Data with SQLite in Flutter
SQLite is an open supply computer database, it's wont to produce a piece of information, perform completely different operations like add, delete, and take away knowledge. SQLite doesn't need a server or backend code, all the info is saved to a computer file within the device, or we will say it's na
4 min read
Flutter - Updating Data on the Internet
In today's world, most applications heavily rely on fetching and updating information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore the same. To update the data on the Internet follow the below steps: Import the ht
5 min read
Flutter - Using Tuples
A tuple is a collection of items that could be dissimilar. It is the list-like data type. Since it is not a built-in data type in Flutter we need a tuple package to include it in the project. Let's discuss tuple in the Flutter in this article. Add in the Dependency: In Flutter, a tuple needs to be a
2 min read
Flutter - Send Data to Screen
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
Flutter - Sharing Data Among Flutter Pages
In this article, we are going to find the solution for the problem statement "Import/send data from one page to another in flutter". Before going into the topic, there are some pre-requisites. Pre-requisites:Basics of dart programming language.Setting up Flutter in VS code or Setting up Flutter in A
4 min read
Flutter - Sending Data To The Internet
Interacting with the Internet is crucial for most apps to function. In Flutter, sending data to the internet is one of them, and the http package is used to send the data to the internet. In this article, we will explore the same topic in detail. Steps to Implement Sending Data to the InternetStep 1
5 min read
Google Sign In With Firebase in Flutter
Firebase is a product of Google that helps developers to build, manage, and grow their apps easily. It helps developers build their apps faster and more securely. No programming is required on the Firebase side which makes it easy to use its features more efficiently. Google Sign-in with Firebase in
6 min read
Flutter - Fetching JSON Data using HTTP
In this article, we will learn how to fetch data from the internet or JSON file using the HTTP package in a flutter. What is HTTP?The HTTP is a composable, future-based library for making HTTP requests. This package contains a set of high-level functions and classes that make it easy to consume HTTP
5 min read
Flutter - Project Setup with GetX CLI Tool
In this article, we will learn how to set up or file structure our Flutter project using get_cli. You might be aware of the GetX state management. If not, let us explain to you all the things so that you are familiar with these terms. State Management is to manage the things between 2 or more screen
3 min read
Flutter - Creating Snackbar Using GetX Library
Sometimes, it's very useful to show the message when a certain action takes place in our app. Let's suppose, we have a list of items and we want to delete any item from the list then after deleting those items, some message should be displayed to inform the user that the item has been deleted. If we
2 min read