GetX for your Flutter applications - Part 1

Have you worried about things like boiler plate, time consumption for code generations bundling up along with your state management packages and long syntax for simple flutter widgets, i.e, snackbar, navigator, media query? Here, comes the problem solver which overcomes all these drawbacks and makes your app more efficient.

Introducing GetX

GetX is a Flutter package which offers state management, dependency injection management and route management, all co-dependently working with each other. It centralizes most development needs under one package. It is also interdependent, which means you don't need to use all the features, instead just customise as per the need. For example, if you wish to use it only for state management you don't need to include dependency or routes management in the process. It also offers easy implementation of theming, validation and internationalisation.

Routing using GetX:

Using GetX, you can define routing or navigation for screens without a context or a builder. Learn how this is done by following the steps below:

• First we shall begin by learning how to navigate to the next screen. Follow the code given below to do this:

Get.to(SomePage());

• In case you want to navigate back to previous screen, use the code below:

Get.back();

Navigator.pushReplacement can be declared as Get.off(SomePage());

Navigator.pushNamedAndRemoveUntil can be declared as Get.offAll(SomePage());

• In order to use route management or GetX methods you need to change your MaterialApp() to GetMaterialApp(). This step is optional if we are going to use using GetX only for state management.

To display the Snackbar on GetX:

You can display the snackbar without context or a scaffold key. You can also customize the snackbar's color and position using snackPosition and backgroundColor, respectively. Follow the code below to display the snackbar:

Get.Snackbar('Hey', 'This is easy to implement');

To display dialogs on GetX:

GetX offers an easy way to display alert dialogs. This can be used instead of showGeneralDialog. You can declare the custom dialog widget as shown below:

Get.dialog(yourDialogWidget());

Else, you can go with the default option provided by GetX which looks like this:

Get.defaultDialog(
onConfirm: () {
// action need to be done
},
title: 'GetX alert dialog',
middleText: 'Dialog displayed',
);

To display BottomSheets on GetX:

Follow the code given given below to display BottomSheets on GetX:

Get.bottomSheet(
builder:(_)
{
return YourBottomSheet()
}
);

To define MediaQuery on GetX:

In order to define the MediaQuery, we need to first define the width and height as shown below:

• MediaQuery.of(context).width can be declared as Get.width

• MediaQuery.of(context).height can be declared as Get.height

Conclusion

GetX is a simple and more powerful option that is available to developers. As you can see, GetX reduces coding by declaring flutter widgets and reducing the use of boilerplate codes with a neat and readable syntax .

My next blog on 'GetX for State Management' will give you insights on how can we implement GetX for state management in our Flutter application. Hope you'll give it a read!

Package link : GetX

Thank you!