Getx Flutter

This brief guide explores GetX, a robust and lightweight Flutter state management library. While Flutter offers various state management tools like Provider, GetX stands out for its context-free operations and simplicity. This tutorial will delve into integrating GetX into Flutter projects, enhancing cross-platform app development efficiency.

What is GetX?

GetX is a flutter-based state management library that is fast, reliable, and lightweight. There are several State Management libraries in flutter, including MobX, BLoC, Redux, Provider, and others. GetX is also a powerful micro-framework that allows us to manage states, create routing, and do dependency injection. State management enables information transit inside the application. Furthermore, whenever information is delivered, the application's state is changed, thereby reconstructing the system.

Along these lines, developers must exercise extreme caution while maintaining an application's state, as state updates might appear to be prohibitively expensive for a complicated application.

GetX operates on three fundamental principles. This indicates that the following are the top priorities for all library resources:

• Performance:
  As compared to other state management libraries, GetX is the best since it uses the fewest assets and provides the greatest execution. It does not make use of ChangeNotifier or Streams. Examine the RAM graph underneath, which depicts several state managers.
• Productivity:
  GetX's syntax is straightforward, making it helpful. It saves developers a lot of time and speeds up the program because it doesn't need any extra assets. It just uses the assets that are now necessary, and after its task is through, the assets will be released naturally. If all of the assets are packed into memory, it will not be simply beneficial. Hence it's best to include GetX in this.
• Organization:
  The dependency injection, view, logic, and route of the GetX code are coordinated. In order to go between multiple displays, we don't need to worry about any extra context. We are not reliant on the widget tree since we can browse the screen without making use of the special situation.

Three Pillars of GetX

1. State management:
   There are two state managers in GetX. The first is a basic state manager that works with the GetBuilder function, while the second is a reactive state manager that works with Getx or Obx. Below, we shall go into more depth about it.
2. Route management:
   GetX can help you switch between screens, display SnackBars, open up dialogue boxes, or add bottom sheets without using context. GetX can generate widgets like Snackbars, Bottomsheets, dialogues, etc. without relying on context, therefore if we want to create any of them, we can do so.
3. Dependency management:
   GetX offers a straightforward yet effective controller-based approach to managing dependencies. It may be accessible from the view without an inherited widget or context with only one line of code. In most cases, you would create an instance of a class within a class, but with GetX, you are creating an instance of the Get class, which will be accessible across your application.

Why GetX?

For flutter, GetX is an extremely effective and lightweight state management solution. It provides a range of practical characteristics, such as:

• High performance:
  GetX uses the least amount of resources that is reasonable. It doesn't rely on ChangeNotifier or Streams. If everything else is equal, it uses low inertness GetValue and GetStream to improve performance.
• Code organization is simple:
  Bloc's fame derives from its ubiquitous code sorting-out capacities. That makes it simpler to separate your business's reasoning from the presentation layer. As stated in the official text, GetX is a distinctive development for this. Both the display layer and the business justification may be separated in GetX.
• Less code:
  Perhaps you're sick of writing pointless scripts and implementing boilerplate in the bloc pattern. Isn't it true that time is money? You won't write any boilerplate in GetX. Using GetX, you can complete the same task much more quickly and with less code. Creating classes for the state and event is not necessary because GetX already has these boilerplates.
• Don't worry about context:
  The context of your application is crucial. Sending the context from your view to the controller, though, might occasionally be cumbersome. You don't need to do this with GetX. Without a specific context, you can access controllers inside of another controller.
• No code generation:
  There is an urgent need to use code generators in whatever way possible. As a result, you won't have to spend any more of your valuable development time running code generators (build runner) each time you alter your code.
• No unnecessary rebuilds:
  State managers based on ChangeNotifier have a problem with unwanted modifications. All widgets that rely on your ChangeNotifier class are rebuilt whenever you introduce an enhancement to it. Some rebuilds could be unnecessary and costly. The performance of the application can also suffer. As GetX in no way makes use of the ChangeNotifier, you shouldn't worry about it.

Value Added Features of GetX

GetX comes with numerous fantastic capabilities that make creating mobile applications in Flutter even simpler without using any boilerplate code:

• Internationalization:
  Internationalization includes employing single, plural, and parameter translations together with key-value mappings and different language support. Changing the localization of the app merely requires executing the Get command everywhere throughout the app.
• Validation:
  GetX also offers email and password validation services. There is a separate validation package necessary to install.
• Storage:
  Moreover, GetX offers synchronous key-value memory backup of data that is fully written in Dart, and it works seamlessly with the GetX core package.
• Themes:
  GetX makes it easy to switch between bright and dark themes.
• Responsive view:
  You may rapidly create an application's UI that is responsive for desktop, tablet, phone, and watch by extending using GetView if you are designing an application for various screen sizes.

GetX State Management

Flutter offers a wide variety of State Management libraries, including BLoC, Provider, MobX, and others. We have two approaches for managing states within GetX itself, one is a simple state manager also known as GetBuilder and another is a Reactive state manager also known as GetX/Obx.

1. An alternative method:
   Because GetBuilder is not reactive, we are unable to use streams and must instead use the GetX class. GetX's syntax is quite similar to GetBuilder's, but it takes a stream-based approach. We don't need to utilize StreamControllers, StreamBuilders for each variable, classes for each state, or even automatically created classes from code generators because GetX has all the functionality needed for reactive programming. Let's examine its usage.

Any variable must have .obs added to it in order to become observable. Counter basically functions as a stream of int type. We may listen to the changes of the counter from our view utilizing the capability of GetX. like this,

Instead of using GetX, which provides an anonymous function that generates a widget for us, we may use the Obx widget. But, in order to utilize our variables and methods from our view, we must first initialize the Controller as shown below.

2. Simple state management:
   The GetBuilder feature of GetX is used to create interactions between UI screens or views and the variables and methods on the controllers. At this point, we may run functions and monitor state changes. So let's start by making a controller.

We utilize the update() function so that our widgets in UI may listen to the modifications we accomplished in the method of our controller. We now need to wrap our widget with a GetBuilder in order to listen for updates.

Just the first time, and the second time we use ReBuilder for the same controller, do we need to initialize our controller.

With GetX, there is no need to utilize StatefulWidget because GetBuilder takes the role of it, allowing us to maintain all widgets stateless and wrap individual widgets as needed using GetBuilder.

Implementation

Step 1:
Create a new flutter project from start.

Step 2:
GetX packages are added to pubspec.yaml file of the app.

Step 3:
Create a similar app structure to the following image Each page will include three files. a page/view, a binding, and a controller. Controller Your fields are made observable and all of your logic is handled by the GetxController class.

Binding Instead of calling your controllers, repositories, APIs, and other resources straight from the view page, you may initialize them via bindings.

Page/View This page serves as the showcase for your app's design.

Step 4:
Before moving from one screen to another in GetX, we need routes. Create some routes now.

Step 5:
Initialize your page after changing your MaterialApp widget with GetMaterialApp in main.dart.

Run your app now that everything is finished.

Other GetX Features

Route management
Historically, code might appear like follows when a user wishes to go from one screen to another with the click of a button:

Yet with GetX, there are only really two words:

When you need to return to the previous screen:

When utilizing GetX, context is not at all necessary:

There are two methods available in the default Flutter navigation system for moving to another screen when a dialogue or drawer is open:

1. After closing the dialogue box or drawer, go about as follows:

2. If you generated named routes:

GetX makes it easier to construct named routes, switch between screens, and close any active dialogues or drawers:

Changing between light and dark themes, and vice versa With GetX flutter, switching between dark and light modes is really simple. We add properties for theme and darkTheme, instantiate themeController, and add the same to the themeMode property within the GetMaterialApp widget:

Finally, we add an icon that toggles between a bright and dark theme to our Home screen's appBar. Simply have a look at the code below (the user may design this home screen):

That's all there is to it. You can now quickly switch between bright and dark themes.