GetX State Management | GetX library state management tutorial

GetX State Management :

GetX State management usage and implementation is explained in this part of the tutorial with considering a counter example without StatefulWidget in flutter app.

In general when we deal with counter example we require a StatefulWidget to make the Text view get the updated information on every button click.

Using this tutorial we will be using a StatelessWidget and will create a counter example which works same as the earlier version.

We have covered state management concepts in flutter using several examples you may have a look here.

We will be emitting the data in the form of stream updates and listen to those changes and update the Text widget accordingly can go through the below tutorial for more information.

Can go through the below tutorial for more information on implementation with a video tutorial.

 

 

pubspec.yaml :

Add the get dependency to implement getx state management, provide the latest version to avoid code discrepancies.

dependencies:
  flutter:
    sdk: flutter
  get: 4.1.4

 

main.dart :

We need to provide the variable using which we can store and update the data

var count = 0.obs;

 

We have added obs to convert the variable to stream of variables using which we can emit the data.

You can make use of any type of variable and convert it according to the stream.

We are incrementing the variable count on button click

TextButton(onPressed: (){ count ++;
}, child: Text("Click")),

 

Now we can observe the data emitted and populate it to the Text widget.

Obx(() => Text("$count"))

The rest is basic structure for flutter app coding refer to video tutorials on channel for detailed explanation.

 

Providing the full source code for flutter getx state management implementation.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

   MyApp({Key? key}) : super(key: key);

  var count = 0.obs;

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Getx State Management"),),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextButton(onPressed: (){ count ++;
              }, child: Text("Click")),
              Obx(() => Text("$count"))
            ],
          ),
        ),
      ),
    );
  }
}

 

GetX State Management Output :

This screen depicts the implementation of GetX state management library.

If you are having any query in this tutorial on GetX state management let us know in the comment section below.If you like this tutorial do like and share for more interesting updates.