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-source computer database, it's wont to store a piece of information, perform completely different operations like add, delete, and update. SQLite doesn't need a server or backend code; all the info is saved to a computer file within the device, or we can say it's native to storage.
7 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. Let's see a sample video of what we are going to develop.Sample Video:St
5 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 - 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 - 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
A Hello World App using Flutter
In Flutter, everything is a Widget, and by using predefined widgets, one can create user-defined widgets just like using int, float, and double can create user-defined data types. In Flutter there are three types of widgetsStateless WidgetStateful WidgetInherited WidgetIn this article, we will use S
3 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
HTTP GET Request in Flutter
There is no use of building a UI in Flutter until you integrate it with your backend. A GET request is used to extract useful data from your backend to use it in your application.Steps to implement HTTP GET RequestStep 1 : Create a new Flutter ApplicationCreate a new Flutter application using the co
3 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