FlutterWorld
Published in

FlutterWorld

Flutter: How to scroll to a specific position in ListView?

There is always a problem with scrolling in ListView inside Flutter, so here I am coming with an example where we can scroll to a specific index of ListView.

Here we are using scroll_to_index dependency which solves our equation of scrolling easily. but first, we need to understand What ScrollController do?

Looks Amazing Right :) As it is not easy in a flutter.

ScrollController Controls a scrollable widget. Scroll controllers are typically stored as member variables in [State]objects and are reused in each [State.build]. A single scroll controller can be used to control multiple scrollable widgets, but some operations, such as reading the scroll [offset], require the controller to be used with a single scrollable widget. A scroll controller creates a [ScrollPosition] to manage the state-specific to an individual [Scrollable] widget. To use a custom [ScrollPosition], subclass [ScrollController] and override [createScrollPosition]. A [ScrollController] is a [Listenable]. It notifies its listeners whenever any of the attached [ScrollPosition]s notify _their_ listeners (i.e. whenever any of the scroll). It does not notify its listeners when the list of attached [ScrollPosition]s changes. Typically used with [ListView], [GridView], [CustomScrollView].

AutoScrollController extends ScrollController which used in the below sample which contains the additional logic of scrolling. It’s internally calculated offset value and performs scrolling till the given index.

Use Dependency:

dependencies:
scroll_to_index: ^1.0.6

Example: Generate the list of 20 items and scroll to the sixth position of Listview on click of Fab Button

Code Snippet:

import 'package:flutter/material.dart';
import 'package:scroll_to_index/scroll_to_index.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Scroll To Index Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Scroll To Index Demo'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
final scrollDirection = Axis.vertical;

AutoScrollController controller;
List<List<int>> randomList;

@override
void initState() {
super.initState();
controller = AutoScrollController(
viewportBoundaryGetter: () =>
Rect.fromLTRB(0, 0, 0, MediaQuery.of(context).padding.bottom),
axis: scrollDirection);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView(
scrollDirection: scrollDirection,
controller: controller,
children: <Widget>[
...List.generate(20, (index) {
return AutoScrollTag(
key: ValueKey(index),
controller: controller,
index: index,
child: Container(
height: 100,
color: Colors.red,
margin: EdgeInsets.all(10),
child: Center(child: Text('index: $index')),
),
highlightColor: Colors.black.withOpacity(0.1),
);
}),
],
),
floatingActionButton: FloatingActionButton(
onPressed: _scrollToIndex,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}

Future _scrollToIndex() async {
await controller.scrollToIndex(6, preferPosition: AutoScrollPosition.begin);
}
}

Output:

--

--

--

The fastest growing community which makes development easier

Recommended from Medium

Kotlin Contracts: Are they useful?

Isn’t it wonderful

Passing data between Activities, Fragments, and Dialog Fragments

How to show less verbose in Android Studio & IntelliJ

Write a Notebook #4 — Put everything together

Build a self updating Android Application

Crack Coroutine Exception Propagation — Part 1

Get X  — Flutter

Implementation Vs Api in Android Gradle plugin 3.0

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jitesh Mohite

Jitesh Mohite

I am technology enthusiastic, want to learn things quickly and dive deep inside it. I always believe in developing logical things which makes impact on end user

More from Medium

Flutter gallery: import show

Location in Flutter : Implement Location functionality in Flutter | Managing user permission.

Flutter — Introduction

Flutter of Hope