Getx lightweight all in one package State Management, Navigation Manger, and Dependency Manager.

GetX

if you are searching which solution or state management to use in the project then you should take look at it getx all in one solution.

What is Getx?

GetX is an extra-light and powerful solution for Flutter. It provides State Management, Navigation, Localization, Dialog, Advanced APIs and other Until Methods, and many more.

Why Getx?

• We don’t need context, builder, or anything.

Get.Height 
Get.to(SomePage()); many more without context

• Well maintained package and active community so we don’t need to worry about incompatibility. (flutter favorite)
• Less Ram, Fewer lines of code

Install Getx

get: ^3.13.2

State management

1. Simple State Manager: It will update UI only when manually calling update methods (like setState).

The simple State Manager will be using.

GetBuilder()

2) Reactive State Manager-: It will listen for a change in event or variable and when an event occurs it will automatically Update UI.

Reactive State Manager will be using

Obx
GetX

Now let’s take the counter app example will be using a reactive approach.

Firstly you need to define GetX Controller

Here we have two function increment and decrement and getter for current value.

On Button click call controller increment method and wrap text widget with obx

Here I have wrapped my text widget with an obx widget so when any change occurs then our UI will get updated automatically.

You can also use

GetX<CounterController>(
    builder: (controller) => Text(
          '${controller.currentCount}',
          style: Theme.of(context).textTheme.headline4,
        )),

In Getx you don’t need to define the controller at the top level.

Which one to Use

GetBuilder

• Use it wherever you would use setState.
• Much less Ram

GetX.

• It redraws the widget only when the value of the variable is changed.
• when you want to take advantage of the reactive approach.

var count=0;
count++   //at that time widget will redraws

Obx

• If you prefer a simple syntax.
• Obx doesn’t need a type, so it can use with many controllers

Navigation

A big advantage is for navigation you don’t have to use context anymore.

Note-: if you just want to use State Management then you don’t need to change MaterialApp to GetMaterialApp.

Now Let move on change MaterialApp to GetMaterialApp like this.

Navigate from one screen to another screen.

Get.to(PageName());

To go to the next screen and no option to go back to the previous screen (like SplashScreens, ETC)

Get.off(PageName());

To go to the next screen and cancel all previous routes

Get.offAll(PageName());

There many other properties like

duration
transition
fullscreenDialog
opaque 
ETC

To create dialogs

Get.dialog(AlertDialog(
  title: Text('Hello Dialogs'),
  backgroundColor: Colors.white,
  elevation: 5,
  content: Text('Dialogs using GetX'),
  actions: [
    TextButton(
        onPressed: () {
          Get.back();
        },
        child: Text('Yay'))
  ],
));

To Create Snackbar

Get.snackbar('Snackbar', 'Snackbar using Getx',
    snackPosition: SnackPosition.BOTTOM, backgroundColor: Colors.black54);

Full code

Dependency

Get.put makes the dependency available to all the child routes. So, in case we need to access the same instance in some other class, we can do that using Get.find.

You can do something like this

class FirstPage extends StatelessWidget 
{
   Controller controller = Get.put(Controller()); -->Put Controller
}
 class SecondPage extends StatelessWidget {
   Controller controller = Get.find(); -->Find controller
}

And Boom! you can access the controller

Bindings

The above approach is nice but we are still defining our controller to view classes.

We can create a binding class.

And we can bind that class with Routes.

Get.to(FirstPage(), binding: FirstPage()); // like
or maybe 
Get.toNamed("/", binding: FirstPage()); // this!

Utils

Other helpfully APIs

You don’t have to worry about the performance take look at the benchmark score.

If you want to take look at the full source code here is the repo link.

jigarfumakiya/Getx-demo

Thank you for reading

If you learned even a thing or two, clap your hands👏 as many times as you can to show your support! It really motivates me to contribute to the community.