Flutter: Jump to specific item by item data in ListView.builder

Question

It's possible to jump to specific item by item data in ListView?

class Test extends StatelessWidget {
  Test({Key? key}) : super(key: key);

  final _list = <String>[
    "INFWARS_CH01_EP01",
    "INFWARS_CH01_EP02",
    "INFWARS_CH01_EP03",
    "INFWARS_CH01_EP04",
    "INFWARS_CH01_EP05",
  ];

  void _scrollToItem() {
    final specificItem = "INFWARS_CH01_EP04";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: _list.length,
        itemBuilder: (context, index) {
          final data = _list[index];
          return Text(data);
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _scrollToItem(),
      ),
    );
  }
}

as you can see, I want to jump to specific item in ListView by specific data "INFWARS_CH01_EP04" using _scrollToItem function, not by index or by position.

So the item ListView for INFWARS_CH01_EP04 will be in the top (scrolled). For now in the top is INFWARS_CH01_EP01.

It's possible to do it?

Answer 1

I fix it using this package: https://pub.dev/packages/scroll_to_index

So you can scroll / jump to specific item by index / by item data in ListView.

class Test extends StatelessWidget {
  Test({Key? key}) : super(key: key);
  AutoScrollController _scrollController = AutoScrollController();

  final _list = <String>[
    "INFWARS_CH01_EP01",
    "INFWARS_CH01_EP02",
    "INFWARS_CH01_EP03",
    "INFWARS_CH01_EP04",
  ];

  void _scrollToItem() async {
    final specificItem = "INFWARS_CH01_EP04";
    final index = _list.indexOf(specificItem);
    await _scrollController.scrollToIndex(
      index,
      preferPosition: AutoScrollPosition.begin,
    );
    await _scrollController.highlight(index);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        controller: _scrollController,
        itemCount: _list.length,
        itemBuilder: (context, index) {
          final data = _list[index];
          return AutoScrollTag(
              key: ValueKey(index),
              controller: _scrollController,
              index: index,
              child: Text(data),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _scrollToItem(),
      ),
    );
  }
}

Answer 2

To scroll to a specific item you can:

1. Find the specific item using the indexOf() method:

2. Use the scrollable_positioned_list package to scroll to that item.

Here is a complete working example:

class Test extends StatelessWidget {
  Test({Key? key}) : super(key: key);
  ItemScrollController _scrollController = ItemScrollController();

  final _list = <String>[
    "INFWARS_CH01_EP01",
    "INFWARS_CH01_EP02",
    "INFWARS_CH01_EP03",
    "INFWARS_CH01_EP04",
  ];

  void _scrollToItem() {
    final specificItem = "INFWARS_CH01_EP04";
    _scrollController.jumpTo(index: _list.indexOf(specificItem));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ScrollablePositionedList.builder(
        itemScrollController: _scrollController,
        itemCount: _list.length,
        itemBuilder: (context, index) {
          final data = _list[index];
          return Text(data);
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _scrollToItem(),
      ),
    );
  }
}

See also: flutter ListView scroll to index not available

Answer 3

You can use the flutter_scrollview_observer lib to implement your desired functionality without invasivity

Create and use instance of ScrollController normally.

ScrollController scrollController = ScrollController();

ListView _buildListView() {
  return ListView.separated(
    controller: scrollController,
    ...
  );
}

Create an instance of ListObserverController pass it to ListViewObserver

ListObserverController observerController = ListObserverController(controller: scrollController);

ListViewObserver(
  controller: observerController,
  child: _buildListView(),
  ...
)

Now you can scroll to the specified index position

// Find the specific item index.
final targetIndex = _list.indexOf(specificItem);

// Jump to the specified index position without animation.
observerController.jumpTo(index: targetIndex)

// Jump to the specified index position with animation.
observerController.animateTo(
  index: targetIndex,
  duration: const Duration(milliseconds: 250),
  curve: Curves.ease,
);