How to rebuild only the changed content with Getx?-CodePudding

I have a map (Using flutter maps) that presents some layers that can be enabled or disabled by the user. For that I have two buttons to disable and enable these layers, and I'm controlling their state with a getX controller.

  RxBool radar = false.obs;
  RxBool satelite = false.obs;

I want when the user clicks on one of these buttons the layer related to it activates or deactivates. So far so good, however, I want that when he activates the radas layer, the other layer remains without re-rendering and vice versa. What is happening is that when the user activates/deactivates a layer, the map component re-renders and ends up causing the other layer to reload its content.

GetX<MenuController>(
          init: MenuController(),
          builder: (menuController) {
            return FlutterMap(
              options: MapOptions(),
              layers: [
                if (menuController.radar.value) //Handle True or false
                  TileLayerOptions(
                    wmsOptions: WMSTileLayerOptions(
                      baseUrl: "MyUrlLocales",
                    ),
                  ),
                if (menuController.satelite.value) //Handle True or false
                  TileLayerOptions(
                    wmsOptions: WMSTileLayerOptions(
                      baseUrl: "MyUrlCars",
                    ),
                  ),
              ],
            );
          },
        ),

CodePudding user response：

Obviously this happens because you have given GetX to the whole FlutterMap

create a controller for MenuController

var _controller = Get.put(MenuController());

and

 FlutterMap(options: MapOptions(), children: [
              Obx(
                () => Visibility(
                  visible: _menuController.radar.value,
                  child: TileLayerWidget(
                    options: TileLayerOptions(
                      wmsOptions: WMSTileLayerOptions(
                        baseUrl: "MyUrlLocales",
                      ),
                    ),
                  ),
                ),
              ),
              Obx(
                () => Visibility(
                  visible: menuController.satelite.value,
                  child: TileLayerWidget(
                    options: TileLayerOptions(
                      wmsOptions: WMSTileLayerOptions(
                        baseUrl: "MyUrlCars",
                      ),
                    ),
                  ),
                ),
              ),
            ]),

CodePudding user response：

You can do something like this :

var _controller = MenuController();

And in your build function let's say you want to update one widget runtime you can do something like this,

                FlutterMap(
                  options: MapOptions(),
                  layers: [
                    if (menuController.radar.value) //Handle True or false
                      
                      Obx(()=> TileLayerOptions(
                        wmsOptions: WMSTileLayerOptions(
                          baseUrl: "MyUrlLocales",
                        ),
                      )),
                    if (menuController.satelite.value) //Handle True or false
                      TileLayerOptions(
                        wmsOptions: WMSTileLayerOptions(
                          baseUrl: "MyUrlCars",
                        ),
                      ),
                  ],
                )

So you need to wrap the widget with Obx() which you want to update runtime.