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 used to store pieces of information and perform various operations, such as adding, deleting, and updating. SQLite doesn't need a server or backend code; all the data is saved to a computer file within the device, or we can say it is stored locally. Demo Vi
8 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
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