Flutter - Passing Multiple Data with GetX

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:

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.

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.

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.

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.

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.

Complete Source Code

main.dart:

Output: