Scrolling to a selected GroupedListView index/item

[DennisH511]

Context:
I have a ListView and I'm using the scrollview_observer package to automatically scroll the selected index to the top of the list when selected. Everything works as expected.

List data:

final List<MyEvent> _myEventsList = [
    MyEvent(date: DateTime(2019, 1, 1)),
    MyEvent(date: DateTime(2019, 2, 1)),
    MyEvent(date: DateTime(2019, 3, 1)),
    MyEvent(date: DateTime(2020, 1, 1)),
    MyEvent(date: DateTime(2020, 2, 1)),
    MyEvent(date: DateTime(2020, 3, 1)),
    MyEvent(date: DateTime(2020, 4, 1)),
  ];

Issue:
When I replace the ListView with a GroupedListView, grouping the items by the event year and try to scroll to the selected index, the list scrolls but not to the correct position for the selected item. The grouped items have the correct index.

For the example data, if I select the item with index 4, the list scrolls to the top of the item with index 2.

Counting from the top of the list, the item with index 2 is the 4th item if you include the 2 group headers.

Any help is appreciated.

Thanks

[ChhengkheangO]

This might be late. What I found after digging into this package source code and some ChatGPT deep dive prompt, this is my answer with code and video.
I manage to get it closed to correct but not perfect.

By the way, thanks for the [scrollview_observer] package.

return ListViewObserver(
controller: observerController,
onObserve: (result) {
if (ref.watch(isMenuAnimating)) return;

    final sliverIndex = result.firstChild?.index;
    if (sliverIndex == null) return;
    final elementIndex = sliverIndex ~/ 2;
    if (elementIndex < 0 || elementIndex >= itemTypes.length) return;

    final lastIndex = ref.read(previousCategoryIndex);
    if (lastIndex == elementIndex) return;
    ref.read(previousCategoryIndex.notifier).state = elementIndex;

    final currentItemType = itemTypes[elementIndex];
    ref.read(itemTypeNotifierProvider.notifier).itemTypeSelected(currentItemType.id ?? 0);

    final entry = itemTypes.asMap().entries.firstWhere(
      (e) {
        final nameToFind = DeviceUtil.isKhmerLang(context) ? e.value.nameKh : e.value.name;
        final currentName = DeviceUtil.isKhmerLang(context) ? currentItemType.nameKh : currentItemType.name;
        return nameToFind.validate() == currentName.validate();
      },
      orElse: () => MapEntry(0, ItemTypeModel()),
    );
    final index = entry.key;
    ref.watch(categoryScrollControllerObsProvider).animateTo(index: index, duration: 450.milliseconds, curve: Curves.easeInOut);
  },
  child: GroupedListView<ItemTypeModel, String>(
    controller: scrollController,
    physics: AlwaysScrollableScrollPhysics(),
    separator: const SizedBox(height: AppSizes.spacing10),
    shrinkWrap: true,
    elements: itemTypes,
    padding: EdgeInsets.zero,
    useStickyGroupSeparators: true,
    stickyHeaderBackgroundColor: context.getBgColor(ref),
    groupBy: (ItemTypeModel itemType) {
      return (DeviceUtil.isKhmerLang(context) ? itemType.nameKh : itemType.name) ?? '';
    },
    groupComparator: (String a, String b) {
      final indexA = itemTypes.indexWhere((e) {
        final name = DeviceUtil.isKhmerLang(context) ? e.nameKh : e.name;
        return name == a;
      });

      final indexB = itemTypes.indexWhere((e) {
        final name = DeviceUtil.isKhmerLang(context) ? e.nameKh : e.name;
        return name == b;
      });

      return indexA.compareTo(indexB);
    },
    groupSeparatorBuilder: (String groupByValue) {
      return Container(
        margin: EdgeInsets.only(bottom: 16),
        child: Row(
          children: [
            SizedBox(width: width400 ? 48 : 28),
            Expanded(
              child: Divider(
                thickness: isMobile ? 2 : 3,
                radius: BorderRadius.circular(32),
              ),
            ),
            SizedBox(
              width: isMobile ? 16 : (DeviceUtil.isDesktopLarge(context) ? 48 : 24),
            ),
            AppText.buildText14(
              fontSize: isMobile ? 19 : 24,
              context: context,
              title: groupByValue,
              textAlign: TextAlign.center,
              fontWeight: FontWeight.bold,
            ),
            SizedBox(
              width: isMobile ? 16 : (DeviceUtil.isDesktopLarge(context) ? 48 : 24),
            ),
            Expanded(
              child: Divider(
                thickness: isMobile ? 2 : 3,
                radius: BorderRadius.circular(32),
              ),
            ),
            SizedBox(width: width400 ? 48 : 28),
          ],
        ),
      );
    },
    itemBuilder: (BuildContext context, ItemTypeModel itemType) {
      final types = {'MAINITEM', 'CREDIT', 'PACKAGE'};
      final filteredItems = items.where((element) {
        final shouldShow = types.contains(element.type) || (element.type == 'INVENTORY' && element.stock == true);
        return (element.itemTypeId == itemType.id) && shouldShow;
      }).toList();

      return GridView.builder(
        physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: filteredItems.length,
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: fullWidth + 12,
          mainAxisSpacing: 6,
          crossAxisSpacing: 6,
          mainAxisExtent: cardHeight,
        ),
        itemBuilder: (context, index) {
          final e = filteredItems[index];
          final isSelect = e.isSelected;
          final colorSelect = isSelect ? context.getPrimaryColor(ref) : Colors.transparent;
          final name = DeviceUtil.isKhmerLang(context) ? e.nameKh : e.name;
          String priceHome = AppHelpers.roundKHRUSDHome(home: home, foreign: foreign, e: e.price!);
          String priceForeign = AppHelpers.roundKHRUSDForeign(home: home, foreign: foreign, e: e.price!);

          return MenuCard(
            onTap: onTap,
            e: filteredItems[index],
            fullWidth: fullWidth,
            colorSelect: colorSelect,
            isMobilePadding: isMobilePadding,
            width400: width400,
            width700: width700,
            width: width,
            name: name,
            priceHome: priceHome,
            priceForeign: priceForeign,
            isSelect: isSelect,
            onTapQty: onTapQty,
          );
        },
      );
    },
  ),
);

}
}

demo.mp4