Question 383573 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Getx: Can RxMap be used with Obx?

I’d like to make a map observable in my controller. But when I wrap the widget that’s using the observable map with Obx(), I get the runtime error that says "[Get] the improper use of a GetX has been detected. You should only use GetX or Obx for the specific widget that will be updated."

But I thought I had used Obx for the specific widget to be updated.

class PaintingControllerX extends GetxController {
  final gridImages = <ui.Image?>[].obs;
}

class PaintingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var controller = Get.put<PaintingControllerX>(PaintingControllerX());
    return Scaffold(
      body: Obx(() => GridWidget(controller.gridImages)),  // ERROR
    );
  }
}

I saw in a different StackOverflow question (Obx widget throws an error) that the problem was resolved by calling the value property on the observed object. But RxMap.value is protected, I can’t use it here. I also noticed there’s a toList() method on RxList, but there’s no corresponding toMap() on RxMap.

How do I use a RxMap with Obx?

Tags:

2

Answers


  1. 0

    Sure, Just use this for widget only. Also you are using list not map.

     //this line will be in controlller
    RxList mymap = <ui.Image?>[].obs



class PaintingPage extends StatelessWidget {
  PaintingPage({super.key});
  PaintingControllerX controller = Get.put(PaintingControllerX());
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        itemCount: 20, // Number of items in the grid
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, // Number of columns in the grid
          crossAxisSpacing: 5.0, // Spacing between columns
          mainAxisSpacing: 5.0, // Spacing between rows
        ),
        itemBuilder: (BuildContext context, int index) {
          //here gridbuilder always update the total lenght of the file if 
           need.
          return Obx(
            () => Container(
              color: Colors.primaries[index % Colors.primaries.length],
              alignment: Alignment.center,
              child: Image.network(controller.gridimage[index]),
            ),
          );
        },
      ),
    );
  }
}

    All though i have not implemented it now. but it should work. If not , then make a comment , i willl test and surely give you an work out. Happy coding.

    Login or Signup to reply.
  2. 0

    Your question is a bit confusing.

    You mention map, but in the code, there is a list <ui.Image?>[].obs.

    Below is a code for RxMap<String, String> and Obx plus GridView. Each grid item contains both Strings (key and value) from the map. You can apply changes regarding images yourself.

    Controller:

    class MapController extends GetxController {
  RxMap<String, String> mapState = <String, String>{}.obs;
  @override
  void onInit() {
    super.onInit();
    mapState.value = {'name': 'John', 'age': '45'};
  }
}

    Screen:

    class MyApp extends StatelessWidget {
  MyApp({super.key});

  final mapController = Get.put(MapController());

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text("Map with Obx"),
              centerTitle: true,
            ),
            body: Center(
              child: Padding(
                padding: const EdgeInsets.all(18.0),
                child: Obx(
                  () => GridView.builder(
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3, // number of items in each row
                      mainAxisSpacing: 8.0, // spacing between rows
                      crossAxisSpacing: 8.0, // spacing between columns
                    ),
                    padding:
                        const EdgeInsets.all(8.0), // padding around the grid
                    itemCount:
                        mapController.mapState.length, // total number of items
                    itemBuilder: (context, index) {
                      String key = mapController.mapState.keys.toList()[index];
                      String value = mapController.mapState[key]!;
                      return Column(children: [
                        Text(
                          key,
                          style: const TextStyle(
                              fontSize: 18.0),
                              
                        ),
                        Text(
                          value,
                          style: const TextStyle(
                              fontSize: 18.0),
                              
                        ),
                      ]);
                    },
                  ),
                ),
              ),
            )));
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search