GetX State Management In Flutter

September 10, 2024September 10, 2024 Shaiq Khan Statemanagement

Flutter is without a doubt the best framework for developing cross-platform applications. Application improvement with Flutter is genuinely magnificent and simple since it gives a rich arrangement of adaptable widgets. Notwithstanding, some state the management choices will not permit you to feel the genuine force of the Flutter framework since you need to burn through your development time implementing a superfluous boilerplate.

State management is an intricate topic of conversation in Flutter. Be that as it may, many state management libraries, like Provider, are accessible, which most developers suggest. At the point when we begin building any application in a flutter, we should conclude which state management we want to utilize. It would be simpler for you to pursue this choice with this blog.

In this article, we will explore the GetX State Management In Flutter. We will see how to implement a demo program. I would like to explain GetX, a powerful flutter framework, and learn how to use the get package in your flutter applications.

get | Flutter Package
GetX is an extra-light and powerful solution for Flutter. It combines high-performance state management, and intelligent…pub.dev

Table Of Contents::

What is GetX?

Principles

Three Pillars Of GetX

Why GetX?

Implementation

Code Implement

Code File

Conclusion

What is GetX?:

GetX is a quick, stable, and light state management library in a flutter. There are so many State Management libraries in flutter like MobX, BLoC, Redux, Provider, and so forth.

GetX is additionally a strong miniature framework and utilizing this, we can oversee states, make routing, and can perform dependency injection.
State management permits you information transfer inside the application. What’s more, at whatever point information is passed, the application’s state is updated, thusly rebuilding the system.

Along these lines, developers must be especially cautious about managing the state of an application since state updation may at times appear to be exorbitant for a complex application.

Demo Module ::

This demo video shows how to implement a GetX State Management in a flutter and shows how GetX State Management will work using the get package in your flutter applications. We will show a routing example using GetX. It will be shown on your device.

Principles:

There are three principles of GetX:

> Performance: When contrasted with other state management libraries, GetX is best since it consumes the least assets and gives better execution. It doesn’t utilize ChangeNotifier or Streams. Take a gander at the beneath RAM graph portraying different state managers.
> Productivity: GetX’s syntax is simple so it is useful. It saves a ton of time for the developers and speeds up the application since it doesn’t utilize additional assets. It utilizes just those assets which are right now required and after its work is done, the assets will be free naturally. If every one of the assets is stacked into the memory, it won’t be simply useful. So better to involve GetX in this.
> Organization: GetX code is coordinated as View, Logic, route, and dependency injection. So we needn’t bother with any additional context to navigate different screens. We can navigate to the screen without utilizing the unique circumstance so we are not dependent on the widget tree.

Three Pillars Of GetX:

> State Management: There are two types of state management:-

Simple State Manager: It uses the GetBuilder function.

Reactive State Manager: It uses GetX and Obx.

> Route Management: To make Widgets like Snackbar, Bottomsheets, dialogs, and so forth. Then, at that point, we can involve GetX in it because GetX can assemble these widgets without utilizing context.
> Dependency Management: GetX has a straightforward yet strong answer for dependency management utilizing controllers. To bring data from different Classes then with the assistance of GetX, we can do this in a solitary line of code. Eg: Get.put()

Why GetX?:

GetX is a very lightweight and powerful state management solution for flutter.

> High performance: GetX utilizes as less assets as could be expected. It doesn’t rely upon Streams or ChangeNotifier. All things being equal, it utilizes low inertness GetValue and GetStream to further develop execution.
> Less code: You might be tired of implementing boilerplate in the bloc pattern and wasting development energy on superfluous codes. Time is money, isn’t that so? In GetX, you won’t compose any boilerplate. You can accomplish the same thing a lot quicker, with less code in GetX. Don’t bother making classes for the state and event, since these boilerplates don’t exist in GetX.
> No code generation: There is a compelling reason need to utilize code generators by any means. So your significant development time won’t squander more on running code generators(build_runner) whenever you change your code.
> Don’t worry about context: Your application context is important. Yet, sending the context from your view to the controller can be, here and there lumbering. In GetX, you don’t have to do this. You can get to controllers inside one more controller with no unique context.
> No unnecessary rebuilds: Undesirable modifies are an issue of state managers based on ChangeNotifier. Whenever you roll out an improvement in your ChangeNotifier class, all widgets that rely upon that ChangeNotifier class are rebuilt. Some rebuilds might be superfluous and expensive. It might diminish the application’s performance too. You don’t need to stress over this in GetX since it doesn’t utilize the ChangeNotifier by any means.
> Code organization is simple: Bloc’s popularity comes from its prevalent code sorting-out capacities. It makes it more straightforward to isolate your business rationale from the show layer. GetX is a characteristic development for this as true documentation says. In GetX, you can isolate the business rationale as well as the show layer.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.1

Step 2: Import

import 'package:get/get.dart';

Step 3: Run flutter packages get in the root directory of your app.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

In the main. dart file, we will return GetMaterialApp(). Also, we will add a theme for color, and a home for showing starting screen.

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter GetX State Management Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const Splash(),
      debugShowCheckedModeBanner: false,
    );
  }
}

Create a new dart file called home_page_controller.dart inside the lib folder.

We will create a class called MyHomePageController inside it and extend the GetxController class. We will add the final count is equal to 0. obs. In GetX, to make a variable observable — this means that when it changes, other parts of our application depending on it will be notified. To do this we simply need to add .obs to the variable initialization. So for our above count variable, we will add .obs to 0.

To wrap things up with the MyHomePageController we will implement the increment method.

import 'package:get/get.dart';

class HomePageController extends GetxController {
  final count = 0.obs;
  increment() => count.value++;
}

Create a new dart file called home_page.dart inside the lib folder.

First, we will create inside the HomePage class, we will instantiate the HomePageController.

final HomePageController controller = Get.put(HomePageController());

For our count, we want the Text widget to be updated with the current count. So we will wrap the Text widget with Obx widget.

Obx(
  () => Text(
    '${controller.count.value}',
    style: Theme.of(context).textTheme.headline4,
  ),
),

We will add floatingActionButton, we will call the increment method when the floatingActionButton is pressed.

floatingActionButton: FloatingActionButton(
  onPressed: controller.increment,
  tooltip: 'Increment',
  backgroundColor: Colors.cyan,
  child: const Icon(Icons.add),
),