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 in the simplest way 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 sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the Required Dependency

Add the below dependency to your pubspec.yaml file.

dependencies:
  get: ^4.6.6

Or, Simply we can run the following command in our Vs Code Terminal.

flutter pub add get

Step 3: Import the Package

First of all import 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,
      home: Screen1(),
      initialBinding: BindingsBuilder(() {
        // Bind the Controller to the Get instance
        Get.put(Controller());
      }),
    );
  }
}

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'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GetX<Controller>(
              builder: (controller) {
                return Text(
                  'Text from Screen 2: ${controller.textFromScreen2}',
                  style: TextStyle(fontWeight: FontWeight.bold),
                );
              },
            ),
            ElevatedButton(
              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 a text and a Button to going back to the Screen1 . Comments are added for better understandings.

Dart

class Screen2 extends StatelessWidget {

  final TextEditingController textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen 2'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(

              controller: textEditingController,
              decoration: InputDecoration(labelText: 'Enter Text'),
            ),
            ElevatedButton(
              onPressed: () {
                // Access the controller and set the text
                Get.find<Controller>().textFromScreen2.value =
                    textEditingController.text;

                // Go back to Screen 1
                Get.back();
              },
              child: Text('Save and Go back to Screen 1'),
            ),
          ],
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file

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,
      home: Screen1(),
      initialBinding: BindingsBuilder(() {
        // Bind the Controller to the Get instance
        Get.put(Controller());
      }),
    );
  }
}
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'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GetX<Controller>(
              builder: (controller) {
                return Text(
                  'Text from Screen 2: ${controller.textFromScreen2}',
                  style: TextStyle(fontWeight: FontWeight.bold),
                );
              },
            ),
            ElevatedButton(
              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'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(

              controller: textEditingController,
              decoration: InputDecoration(labelText: 'Enter Text'),
            ),
            ElevatedButton(
              onPressed: () {
                // Access the controller and set the text
                Get.find<Controller>().textFromScreen2.value =
                    textEditingController.text;

                // Go back to Screen 1
                Get.back();
              },
              child: Text('Save and Go back to Screen 1'),
            ),
          ],
        ),
      ),
    );
  }
}

Output: