Skip to main content

Mixing the two state managers

Some people opened a feature request, as they wanted to use only one type of reactive variable, and the other mechanics, and needed to insert an Obx into a GetBuilder for this. Thinking about it MixinBuilder was created. It allows both reactive changes by changing ".obs" variables, and mechanical updates via update(). However, of the 4 widgets he is the one that consumes the most resources, since in addition to having a Subscription to receive change events from his children, he subscribes to the update method of his controller.

Extending GetxController is important, as they have life cycles, and can "start" and "end" events in their onInit() and onClose() methods. You can use any class for this, but I strongly recommend you use the GetxController class to place your variables, whether they are observable or not.

StateMixin

Another way to handle your UI state is use the StateMixin<T> . To implement it, use the with to add the StateMixin<T> to your controller which allows a T model.

class Controller extends GetController with StateMixin<User>{}

The change() method change the State whenever we want. Just pass the data and the status in this way:

change(data, status: RxStatus.success());

RxStatus allow these status:

RxStatus.loading();
RxStatus.success();
RxStatus.empty();
RxStatus.error('message');

To represent it in the UI, use:

class OtherClass extends GetView<Controller> {

Widget build(BuildContext context) {
return Scaffold(

body: controller.obx(
(state)=>Text(state.name),

// here you can put your custom loading indicator, but
// by default would be Center(child:CircularProgressIndicator())
onLoading: CustomLoadingIndicator(),
onEmpty: Text('No data found'),

// here also you can set your own error widget, but by
// default will be an Center(child:Text(error))
onError: (error)=>Text(error),
),
);
}