Open In App

Flutter - Passing Multiple Data with GetX

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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:


C

chinmaya121221
Improve
Article Tags :

Explore

Lightbox