Dimibe / grouped_list

A Flutter ListView in which items can be grouped into sections.
https://pub.dev/packages/grouped_list
MIT License
395 stars 106 forks source link

GroupedListView not working with getX #154

Open anasfarooqi opened 2 years ago

anasfarooqi commented 2 years ago

Hi, i am trying to use GroupedListView inside Obx, but always gives me an error, "improper use of Getx has been detected".

My Code is GroupedListView<dynamic, String>( elements: menuOptionsController.menuOptions, groupBy: (element) => element['group'], groupSeparatorBuilder: (String groupByValue) => Text(groupByValue), itemBuilder: (context, dynamic element) => ListView.builder( itemCount: element['data'].length, shrinkWrap: true, itemBuilder: (context, index) { print(element); return Text("element['name'][index]"); }, ),

         menuOptionsController is my controller. 
         Anyone has experience this ?     
Dimibe commented 2 years ago

Hello @anasfarooqi, can you please provide more information, especially about the menuOptionsController.menuOptions and how you use the Widget. With the current information, I cannot really help.

SteveOye commented 2 years ago

@anasfarooqi When listening to an observable list from your controller. You don't have to wrap the widget with Obx. Getx automatically listens to changes for list.

JuanCordovaLazo commented 7 months ago

Hello, if it's helpful, I have it working as follows. Note: elements: _controller.changeDetails.filteredProducts.toList() .toList() is important to force a rebuild in case there is a change in filteredProducts of type RxList

return Expanded(
      child: Obx(
        () {
          if (_controller.isLoading.value) {
            return const Center(child: CircularProgressIndicator());
          }
          return GroupedListView<RxProduct, String?>(
            keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
            padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 0),
            elements: _controller.changeDetails.filteredProducts.toList(),
            useStickyGroupSeparators: true,
            groupBy: (rxProduct) => rxProduct.categoryChangeDescription,
            groupSeparatorBuilder: (groupValue) {
              ...
            },
            separator: const Divider(),
            indexedItemBuilder: (context, product, index) {
              ...
            },
          );
        },
      ),
    );