Unable to trigger refresh/load when child widget is GroupedListView

[TreyThomas93]

The following code will let me scroll the listview, but will not trigger the SmartRefresher to refresh or load new data. I'm using the GroupedListView dependency as its child, and I noticed that if I replace that with a normal ListView.builder, that it will work. So not sure what the issue is. Any assistance would be helpful. Thanks!

return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('Title'),
          Expanded(
            child: messages.when(
              data: (data) {
                // if empty
                if (data.isEmpty) {
                  return const Center(
                    child: Text('No messages yet'),
                  );
                }

                // sort messages by timestamp
                data.sort((a, b) => a.timestamp.compareTo(b.timestamp));
      
                return SmartRefresher(
                  controller: _refreshController,
                  enablePullDown: true,
                  onRefresh: () async {
                    // code....
                  },
                  onLoading: () async {
                   // code....
                  },
                  child: Scrollbar(
                    controller: _scrollController,
                    child: GroupedListView<Message, String>(
                      physics: const AlwaysScrollableScrollPhysics(),
                      controller: _scrollController,
                      elements: data,
                      groupBy: (element) =>
                          element.timestamp.toLocal().monthDayYear,
                      groupSeparatorBuilder: (String groupByValue) => Text('Group Name'),
                      itemBuilder: (context, element) {
                        return ListTile(title: Text('Message'));
                      },
                      order: GroupedListOrder.DESC,
                      sort: false,
                    ),
                  ),
                );
              },
              error: (error, stack) {
                log('Error: $error, Stack: $stack');
                return Center(
                  child: Text('Error: $error'),
                );
              },
              loading: () => const Center(child: CircularProgressIndicator()),
            ),
          ),
         // other code...
        ],
      ),
    );

[anjarnaufals]

Hello @TreyThomas93

first thing is , I suggesting you to read this Doc about Smart Refresher child

then this maybe possible solution :

class Home extends StatefulWidget {
  const Home({
    super.key,
  });

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final RefreshController _refreshController = RefreshController();

  Future<void> testRefresh() async {
    _refreshController.requestRefresh();
    await Future.delayed(Durations.extralong4);
    _refreshController.refreshCompleted();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: const Text('Grouped List View Example'),
      // ),
      body: Column(
        children: [
          Container(
            alignment: Alignment.center,
            color: Colors.grey[400],
            width: double.infinity,
            height: kToolbarHeight,
            child: const Text('title'),
          ),
          Expanded(
            child: Scrollbar(
              child: SmartRefresher(
                onRefresh: () async {
                  await testRefresh();
                },
                controller: _refreshController,
                child: GroupedListView<dynamic, String>(
                  shrinkWrap: true,
                  elements: _elements,
                  groupBy: (element) => element['group'],
                  groupComparator: (value1, value2) => value2.compareTo(value1),
                  itemComparator: (item1, item2) =>
                      item1['name'].compareTo(item2['name']),
                  order: GroupedListOrder.DESC,
                  useStickyGroupSeparators: true,
                  groupSeparatorBuilder: (String value) => Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      value,
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                          fontSize: 20, fontWeight: FontWeight.bold),
                    ),
                  ),
                  itemBuilder: (c, element) {
                    return Card(
                      elevation: 8.0,
                      margin: const EdgeInsets.symmetric(
                          horizontal: 10.0, vertical: 6.0),
                      child: SizedBox(
                        child: ListTile(
                          contentPadding: const EdgeInsets.symmetric(
                              horizontal: 20.0, vertical: 10.0),
                          leading: const Icon(Icons.account_circle),
                          title: Text(element['name']),
                          trailing: const Icon(Icons.arrow_forward),
                        ),
                      ),
                    );
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

in the end I suggesting to you for refactor your code to become SmartRefresher the root of body widget ,
Hope this can help

[TreyThomas93]

Thanks @anjarnaufals, I'll give it a try.