Search⌘ K
AI Features
Home
Courses
The Flutter GetX Ecosystem

The MixinBuilder Widget

Explore how to implement the MixinBuilder widget in Flutter using GetX to listen to reactive events and manual update calls simultaneously. Understand its benefits, limitations, and performance considerations while managing different types of state changes through a hands-on example.

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.

Dart
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:

Dart
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 ...