In the previous part, we went through the introduction for the GetX package and explored the usage of some GetX methods. Now, we are going to explore more on implementation of GetX State Management in Flutter. In GetX State Management, business logic is separated from views while dependencies can also be separated using bindings. You can refer the previous article here.
Introducing the Technologies
GetxController
GetxController is a class where our business logic is defined and all our variables and methods are declared to be used from the UI. Each controller class extending from GetxController offers a disposable interface which reduces the manual task of disposing the controller whenever a widget is removed from navigation stack. GetxController comes with lifecycle which replaces methods of StatefulWidgets.
Update(): Using this, widgets can listen to the changes made by the methods defined in controller. It is similar to notifyListeners in providers
onInit(): It is called immediately after the widget is allocated memory.
onReady(): It is called immediately after the widget is rendered on screen.
onClose(): It is called just before the controller is deleted from memory.
GetBuilder
GetBuilder is used to make UI Screens or views interact with the variables and methods on the controllers. From here, we can call functions and listen to the changes in states. GetBuilder is the best way for managing ephemeral state.
GetX
GetX is like GetBuilder, but with streams. Here, we can add .obs to any variable to make them observable.
Obx
This is used in case if we want to use multiple controllers .
Mixin
Mixin is used to combine GetBuilder and Obx
Implement GetX State Management through the Simple State Manager method:
GetX State management can be implemented in any one of four ways depending on the need. Here, we shall dive deep into the first way of implementing GetX with GetxController and GetBuilder for creating a To-do app to add a list of items. To see how its done, follow the steps given below:
Step 1 : Firstly, install Get in your pubspec.yaml file and run
flutter pub get to get the dependencies as shown below:
dependencies:
get: ^3.26.0
Step 2: Next, create a TodoController class which extends to the GetxController and define the required methods and variables, as shown:
class TodoController extends GetxController {
List<String> todoItems = [];
void addTodo() {
int index = todoItems.length;
todoItems.add('Item' + index.toString());
update();
}
}
Step 3: In this short step, create the UI Screens.
Step 4: Declare GetBuilder on the screen where you will implement the to-do function for adding items on the list by initiating the TodoController(). This process is as follows:
return GetBuilder(
init: TodoController(),
builder: (todoController) {
return Scaffold(
appBar: AppBar(
backgroundColor: ColorConstants.appBarColor,
title: Text(
'Todo App List',
style:
TextStyle(color: ColorConstants.primaryColor),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
todoController.addTodo();
},
backgroundColor: ColorConstants.appBarColor,
child: Icon(Icons.add),
),
body: ListView.builder(
itemCount: todoController.todoItems.length,
itemBuilder: (BuildContext context, int index)
{
return TodoListTile(
todoTitle: todoController.todoItems[index]);
}));
});
Step 5: This is how the final result of the app should look like:
You can checkout the complete code for the app here.
Conclusion
GetX reduces memory consumption, resulting in high performance and an organized code. So, unless you need to use a Mixin similar to TicketProviderStateMixin, it will be unnecessary to create StatefulWidgets while using Getx as your State Management.
In the upcoming articles you will get an insight into the on the other techniques employed by Getx.
Thank you so much for reading!
