GetX Flutter State Management Tutorial

In this tutorial, we are going to understand GetX flutter library which is used for state management and navigation. We already implemented flutter navigation using navigator.

GetX is extra-light, fast and stable package for state management in flutter applications. GetX package is used to separate business logic from views. Using GetX flutter package, we can minimize boilerplates codes.

There are many advantages of GetX library. First its syntax is very simple. You can easily understand and remember. Second, It allows us to separate components of flutter code like views, business logic, presentation logic etc. So we do not need to depend on particular widget. Third, It uses less resources. So app performance is better.

We can easily implement navigation in flutter applications using GetX API. So we do not need to write large code of navigator to navigate within flutter app. Syntax of GetX API is very simple and easy to understand.

We do not need to pass context between routes to navigate if we use GetX. We can also easily manage dependencies using GetX in flutter applications. If we do not use any view controller in code, GetX library automatically removes it from memory.

GetX package also provides validation methods to check input validation in flutter apps. So we do need to add any extra validation package in our code. We can also make our app in different languages because GetX package supports internationlization.

We can also save data in key-value pair using GetX package. We can easily integrate it in our code because it is written in Dart language. Main advantage of GetX package is state management because we can manage it with less code.

 

Add required dependency in your app level build.gradle file

get: ^3.23.1
 

We can implement GetX package in flutter applications by different ways : GetxController + GetBuilder, GetX, Obx, Mixin

 

GetxController

GetxController class is used to separate business logic from UI. We have to create one class which inherit GetxController class to separate logic from UI. GetxController class replaces methods of stateful widget.

class MyController extends GetxController {}
 

GetBuilder

This class is used to integrate variables and methods wit UI. We can call methods to detect change in states using this class.

 

GetX

To make any variable to observable, here we can add .obs. It is same as GetBuilder but with streams.

 

Obx

To use multiple controllers, we need to use Obx.

 

Mixin

To combine GetBuilder and Obx, Mixin is used.

 
 

GetX Flutter Navigation

Using GetX package, we can navigate between screens without navigator. To enable GetX navigation in flutter apps, we need to add below line in main.dart file.

import ‘package:get/get.dart’;
 

Then we need to change MaterialApp class to GetMaterialApp class in main.dart file.

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: ‘Flutter GetX Demo’,
home: MyHomePage(),
);
}
}
 

To navigate between first screen to second screen, add below line in your first screen.

Get.to(SecondScreen());
 

To back from second screen to first screen, add below line in your second screen.

Get.back();
 
 

GetX Alert Dialog

To create alert dialog in flutter applications,

Get.defaultDialog();
 

There are multiple properties in GetX default alert dialog. We can set title, description text, confirm and cancel buttons text etc.

Get.defaultDialog(
title: ‘GetX Title’,
middleText: ‘GetX Desc’,
textConfirm: ‘Ok’,
textCancel: ‘Cancel’);
 
 

GetX Flutter Snackbar

We can also display snackbar in flutter applications using GetX library as below.

Get.snackbar(‘GetX Title’, ‘GetX Text’);
 

We can also change color and position of snackbar as below.

Get.snackbar(‘GetX Titler’, ‘GetX Text’,
snackPosition:SnackPosition.TOP,
backgroundColor: Colors.green
);
 

One thought on “GetX Flutter State Management Tutorial

Leave a Reply