The Flutter GetX Ecosystem/

...

/

The MixinBuilder Widget

The MixinBuilder Widget

Learn to combine manual and automatic state management using MixinBuilder.

We'll cover the following...

Introduction

MixinBuilder is a wrapper widget that combines GetBuilder and Obx. It lets us listen to reactive events and manual update calls in the same widget. It is a heavy, multipurpose widget from GetX.

Let’s look at its implementation. We create a controller that has both reactive and simple variables.

Press + to interact
class Controller extends GetxController {
  // Reactive variable
  final RxString name = ''.obs;
  // Simple variable
  int age = 0;
	
  // Update reactive variable
  void updateName(String newName) => name.value = newName;
  // Update simple variable
  void updateAge(int newAge) {
	age = newAge;
	update();
  }
}

Nothing special is going on here. We are just updating one variable manually and another one automatically.

Next, we wrap our widget with MixinBuilder:

Press + to interact
MixinBuilder<Controller>(
  init: Controller(),
  builder: (controller) => Text('${controller.name.value} ${controller.age}'),
)

Now, our widget is actively listening to the updates made to the name variable and also to the controller’s update method. It will react to any kind of change made in the controller.

MixinBuilder follows the same rule of initializing the controller only once as the GetBuilder. For any other MixinBuilder throughout the app, we do not have to initialize the controller again.

What do we get?

As ...