Skip to content
Related Articles

Related Articles

Improve Article

Flutter – GetX State Management Library

  • Difficulty Level : Hard
  • Last Updated : 14 May, 2021

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.

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 are currently 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:

  • Write get under dependency in pubspec.yaml file.
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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :