Dimibe / grouped_list

A Flutter ListView in which items can be grouped into sections.
https://pub.dev/packages/grouped_list
MIT License
416 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 10 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) {
              ...
            },
          );
        },
      ),
    );