What's The Proper Usage Of Obx For ListView.builder?

Question

Below usage is got stucked in an improper use of GetX error.

My first impression was to move the body of itemBuilder into ListView.builder and use as anonymously, but the result was same.

class MySuperPerfectReactiveMagnificentList extends GetView<TheControllerOfSuperThing> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Obx(
        () => ListView.builder(
            shrinkWrap: true,
            itemBuilder: itemBuilder,
            itemCount: 10,
          ),
      ),
    );
  }

  Widget itemBuilder(context, position) {
    return Text(
      // ======> ATTENTION HERE <========
      controller.something.value == position ? 'X' : 'Z',
    );
  }
}

class TheControllerOfSuperThing extends GetxController {
  var something = 1.obs;
}

And error log

flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ flutter: The following message was thrown building Obx(dirty, state: _ObxState#4ebe0): flutter: [Get] the improper use of a GetX has been detected. flutter: You should only use GetX or Obx for the specific widget that will be updated. flutter: If you are seeing this error, you probably did not insert any observable variables into flutter: GetX/Obx flutter: or insert them outside the scope that GetX considers suitable for an update flutter: (example: GetX => HeavyWidget => variableObservable). flutter: If you need to update a parent widget and a child widget, wrap each one in an Obx/GetX. flutter:

Answer 1

I think your implementation is not the best use of getx, try this:

class MySuperPerfectReactiveMagnificentList
    extends GetView<TheControllerOfSuperThing> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ListView.builder(
        shrinkWrap: true,
        itemBuilder: itemBuilder,
        itemCount: 10,
      ),
    );
  }

  Widget itemBuilder(context, position) {
    return Text(
      // ======> ATTENTION HERE <========
      controller.something.value == position ? 'X' : 'Z',
    );
  }
}

class TheControllerOfSuperThing extends GetxController {
  var something = 1.obs;
}

The Obx is expecting a use of at least one controller in the returned widget, however since you are using the GetView directly, there is not need to use an Obx in the code again, as the GetView handles the state in this case.