Scroll to Element

[rivella50]

Based on incoming FCM messages i need to automatically scroll to a certain list element position based on the element's id (not index) it has in its data model. How can this be achieved with a GroupedListView?

[Dimibe]

Hi @rivella50, with the grouped_list package it's not possible to scroll programmatically to a certain position, this is only possible with the sticky_grouped_list package. Currently the package supports only scrolling to an index, but if it's generally possible for you to use the sticky_grouped_list package instead of this package, I will open a feature request and add this requirement to the package.

So let me know if you are able to switch to the sticky_grouped_list package.

[rivella50]

Hi @Dimibe , thanks for your quick reply. If the sticky_grouped_list behaves and (optionally) looks the same as grouped_list i guess that i could switch, yes.

[Dimibe]

Yes it does, the one exception is that there is no SilverGroupedListView. But from you description it seems so that you are using the default GroupedListView so there should be no big problem in my opinion.

[rivella50]

Exactly, i don't use SilverGroupedListView. This is how i use it currently:

Expanded(
            child: GroupedListView(
              physics: const BouncingScrollPhysics(
                  parent: AlwaysScrollableScrollPhysics(),
              ),
              padding: const EdgeInsets.all(16),
              separator: const SizedBox(height: 10,),
              elements: _filteredContracts,
              groupBy: (Contract element) => element.localStatus,
              groupComparator: (ContractLocalStatus left, ContractLocalStatus right) {
                return contractLocalStatusPriority[left]!.compareTo(
                    contractLocalStatusPriority[right]!,);
              },
              groupSeparatorBuilder: (ContractLocalStatus value) => Padding(
                padding: const EdgeInsets.fromLTRB(5, 12, 0, 10),
                child: Text(
                  value.displayName,
                  textAlign: TextAlign.start,
                  style: Theme.of(context).textTheme.titleMedium!.copyWith(
                    color: Theme.of(context).extension<CustomColors>()!.secondaryTitleColor,
                  ),
                ),
              ),
              itemBuilder: (context, Contract contract) =>
                  ContractWidget(contract: contract),
            ),
          ),

[rivella50]

May i ask how the new scrolling/jumping feature (besides scrolling to an index) would look like? E.g. GroupedItemScrollController.jumpToItem(element.contractId)

How does the GroupedList then know to which Contract field the given jumpToItem parameter value belongs to?

[Dimibe]

@rivella50 I haven't thought of a final solution yet. Currently the scroll controller can be used like:

 itemScrollController.jumpTo(index: 4);

The two options I am thinking of right now without any further investigation on their practicability are either passing the whole element to the scroll controller, like:

 itemScrollController.jumpTo(element: myElement);

where myElement must be one item of the list passed to elements.

The second option is to add another parameter to the list view something like elementIdentifier and then pass the identifier to the scroll controller.

StickyGroupedList(
 elements: _myElements,
 elementIdentifier: (element) => element.contractId,
 [...]
);
 itemScrollController.jumpTo(element: myElementIdentifier);

Do you have any preferences?

[rivella50]

Definitely the elementIdentifier option. I wouldn't have the full element available if such a notification arrives, but the elementIdentifier could be anything and would work for me.

[Dimibe]

@rivella50 Solved in Version 3.1.0 of sticky_grouped_list

[rivella50]

Thank you very much. Will try it asap.