Open In App

Flutter – GetX State Management Library

Last Updated : 27 Mar, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

GetX is a fast, stable, and light state management library in flutter. There are so many State Management libraries in flutter like MobX, BLoC, Redux, Provider, etc. GetX is also a powerful micro framework and using this, we can manage states, make routing, and can perform dependency injection.

GetX offers a range of benefits for state management in Flutter, including::

  1. Lightweight and efficient: GetX is incredibly lightweight and efficient, making it ideal for small to large-scale applications. It provides a reactive approach to state management that only rebuilds the parts of your UI that need updating, ensuring your application runs smoothly and efficiently.
  2. Easy to learn: GetX has a small learning curve, making it easy for developers to learn and implement. It provides intuitive APIs that are easy to understand and use, making it an excellent choice for both beginner and experienced developers.
  3. Built-in dependency injection: GetX includes built-in dependency injection, allowing you to easily manage dependencies within your application. This feature makes it easy to switch between dependencies and manage them across your application.
  4. Great community support: GetX has a great community that is constantly contributing new features, bug fixes, and support for the library. The community is also very active on social media, making it easy to get help and support when you need it.

There are three principles of GetX:

  1. Performance: As compared to other state management libraries, GetX is best because it consumes minimum resources and provides better performance.
  2. Productivity: GetX’s syntax is easy so it is productive. It saves a lot of time for the developers and increases the speed of the app because it does not use extra resources. It uses only those resources which arecurrently needed and after its work is done, the resources will free automatically. If all the resources are loaded into the memory then it will not be that productive. So better to use GetX for this.
  3. Organization: GetX code is organized as View, Logic, navigation, and dependency injection. So we don’t need any more context to navigate to other screen. We can navigate to screen without using the context so we are not dependent on widget tree.

GetX Managements:

  • State Management: There are two types of state management:
    • Simple State Manager: It uses GetBuilder.
    • Reactive State Manager: It uses GetX and Obx.
  • Route Management: If we want to make Widgets like Snackbar, Bottomsheets, dialogs, etc. Then we can use GetX for it because GetX can build these widgets without using context.
  • Dependency Management: If we want to fetch data from other Class then with the help of GetX, we can do this in just a single line of code. Eg: Get.put()

Installation:

  • Use this package as a library.

          Depend on it
          Run this command:

           With Flutter:

 $ flutter pub add get
  • This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get)
dependencies:
    get: ^4.1.4

 

  • Import get in main.dart file:
import 'package:get/get.dart';

Why use GetX?

  • When there is any Flutter upgrade, there may so many problems like getting errors when building our app. And when we search the solutions for these errors, we don’t get answers sometimes. So to get the solution to the problems, try to open an issue in that repository. The only thing we need to do after the flutter update is updating the Get dependency.
  • We all know that Flutter is fast, but there are things that need to be avoided like when navigating to another screen, we use Navigator.of(context).push(context, builder(…..)) and doing this so many times is not a good approach for a developer. Instead of writing this, we can simply write Get.to(HomePage()) to navigate to HomePage.
  • When we want to update any Widget, we often use StatefulWidget for that. Instead of creating StatefulWidgets, we can do the same task using Stateless Widget also using GetX. Adding “.obs” to the variable which has to be updated, and placing the Widget inside Obx then we can update the screen when a variable changes the value without refresh the whole page.
  • When we navigate between screens, create widgets like a snack bar, bottom sheets, etc. then we don’t need to use context anymore. So due to GetX, performance increases.

Let’s take an example to navigate to another screen:

  • Normally, we use Navigator.push(context, MaterialPageRoute(builder: (context) => Home()),); to navigate to another screen. This task can also be done by using Get.to(Home());
  • main.dart file:

Dart




import 'package:flutter/material.dart';
import 'package:get/get.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
         
        primarySwatch: Colors.blue,
      ),
      home: First(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class First extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeekforGeeks"),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
     body: Center(
        child: Container(
          child: ElevatedButton(
            child: Text("Go to next screen"),
            onPressed: () {
               
              //navigate to Second screen
              Get.to(Second());
            }
          ),
        ),
      ),
    );
  }
}
 
 
class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeekforGeeks"),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
     body: Center(
       child: Container(
          child: ElevatedButton(
            child: Text("Go to first screen"),
            onPressed: null
          ),
        ),
      ),
    );
  }
}


Output:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads