scroll_to_index

Description:

scroll to index

scroll-to-index #
This package provides the scroll to index mechanism for fixed/variable row height for Flutter scrollable widget.
Getting Started #
In the pubspec.yaml of your flutter project, add the following dependency:
dependencies:
...
scroll_to_index: any
copied to clipboard
In your library add the following import:
import 'package:scroll_to_index/scroll_to_index.dart';
copied to clipboard
For help getting started with Flutter, view the online documentation.
Usage #
This is a widget level library, means you can use this mechanism inside any Flutter scrollable widget.
Example for Flutter ListView
ListView(
scrollDirection: scrollDirection,
controller: controller,
children: randomList.map<Widget>((data) {
final index = data[0];
final height = data[1];
return AutoScrollTag(
key: ValueKey(index),
controller: controller,
index: index,
child: Text('index: $index, height: $height'),
highlightColor: Colors.black.withOpacity(0.1),
);
}).toList(),
)

copied to clipboard
you can wrap any of your row widget which has dynamic row height
AutoScrollTag(
key: ValueKey(index),
controller: controller,
index: index,
child: child
)
copied to clipboard
with the AutoScrollController controller.
when you need to trigger scroll to a specified index, you can call
controller.scrollToIndex(index, preferPosition: AutoScrollPosition.begin)
copied to clipboard
even more, with a fixed row height, you can give it a suggested height for more efficient scrolling. there are more configuration.
final controller = AutoScrollController(
//add this for advanced viewport boundary. e.g. SafeArea
viewportBoundaryGetter: () => Rect.fromLTRB(0, 0, 0, MediaQuery.of(context).padding.bottom),

//choose vertical/horizontal
axis: scrollDirection,

//this given value will bring the scroll offset to the nearest position in fixed row height case.
//for variable row height case, you can still set the average height, it will try to get to the relatively closer offset
//and then start searching.
suggestedRowHeight: 200
);
copied to clipboard
for full example, please see this Demo.
Who Uses #

Quire - a simple, collaborative, multi-level task management tool.