Flutter - Scroll Down to Bottom or Top of List in ListView
Last Updated :
21 Aug, 2021
In this tutorial, we will learn how to scroll down to the bottom of a ListView in Flutter. Scrolling down to the bottom of the list is very boring and so here is a way to scroll directly to the bottom or top of the list.
Project Setup:
Below is a starter code so that you can follow along with this tutorial. This code generates an app with a list of 100 items.
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Geeks For Geeks',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(title: 'Geeks For Geeks'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
// Floating action button. Functionality to be implemented
floatingActionButton: FloatingActionButton(
onPressed: () {},
isExtended: true,
tooltip: "Scroll to Bottom",
child: Icon(Icons.arrow_downward),
),
// Simple List of 100 items
body: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
title: Text("Item ${index + 1}"),
);
},
),
);
}
}
Run the code and the result will be as follows.
Starter codeImplementation:
As you can see our FloatingActionButton is not working as no function is assigned to it in the onPressed field. First of all, we will need a ScrollController to control our ListView. So create a ScrollController.
Dart
ScrollController listScrollController = ScrollController();
Now assign this ScrollController to the controller field of ListView.
Dart
controller: listScrollController,
Now come to the onPressed() field of FloatingActionButton.
Here we will use the following code:
Dart
// We will jump to the bottom of the list
onPressed: () {
if (listScrollController.hasClients) {
final position = listScrollController.position.maxScrollExtent;
listScrollController.jumpTo(position);
}
},
We have first checked whether we can communicate with the members of ScrollController using
Dart
listScrollController.hasClients
If not checked, we will get a runtime error. The above code returns a boolean value. Now moving to the next part, we asked for the maximum scrolling extent of the ScrollController.Â
Dart
final position = listScrollController.position.maxScrollExtent;
This simply means we are asking for the last position in the ListView via ScrollController. And then, we asked the ScrollController to move the position we got above using the jumpTo function.
Dart
listScrollController.jumpTo(position);
Now run the code and you will see the following result.
Scroll down list
So we have successfully reached the bottom of our list.Â
Now you may think that it would be nice if not moving abruptly to the bottom of the list, we will go easily. So the same can be achieved using the animateTo function.
Replace the jumpTo code with the code below:
Dart
// We will reach the bottom of list within a duration of
// 3 seconds animating down the ListView
listScrollController.animateTo(
position,
duration: Duration(seconds: 3),
curve: Curves.easeOut,
);
Now run the app again. You will see the following result.
Animated Scrolling
We have learned how to scroll down the list, now we will learn how to scroll to the top of the ListView.
Instead of getting the maxScrollExtent, we will now use the minScrollExtent from ScrollController and that simply means the top position of ListView.
Here is the code and don't forget to change the Icon:
Dart
// Floating action button is implemented with the above functionality
// and onPressed triggers the function
floatingActionButton: FloatingActionButton(
onPressed: () {
if (listScrollController.hasClients) {
final position = listScrollController.position.minScrollExtent;
listScrollController.animateTo(
position,
duration: Duration(seconds: 3),
curve: Curves.easeOut,
);
}
},
isExtended: true,
tooltip: "Scroll to Top",
child: Icon(Icons.arrow_upward),
),
Now run the app again.
Scrolling top of ListViewComplete Source Code:
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Geeks For Geeks',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(title: 'Geeks For Geeks'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ScrollController listScrollController = ScrollController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
// Floating action button implemented with the
// auto scroll function to the bottom of list
floatingActionButton: FloatingActionButton(
onPressed: () {
if (listScrollController.hasClients) {
final position = listScrollController.position.maxScrollExtent;
listScrollController.animateTo(
position,
duration: Duration(seconds: 3),
curve: Curves.easeOut,
);
}
},
isExtended: true,
tooltip: "Scroll to Bottom",
child: Icon(Icons.arrow_downward),
),
// ListView with 100 list items
body: ListView.builder(
// Scroll Controller for functionality
controller: listScrollController,
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
title: Text("Item ${index + 1}"),
);
},
),
);
}
}
Output:
Scroll to the bottom of the listScroll to the top of the listConclusion:
In this tutorial, we have learned a very interesting feature of ListView that you may have come across on many websites and blogs. So now you can also implement the same feature in your app.
Similar Reads
Flutter - Preserve Scroll Position of ListView Using Page Storage
In this article, we will learn How to Preserve the Scroll Position of Listview Using Page Storage. So let's get started. Step By Step Implementation Step 1: Building main.dart page We have built an AppbarThe elevated button is used with help of which we will navigate to the next page MyList where 10
4 min read
How to Implement Fancy Bottom NavigationBar in Flutter?
Fancy Bottom NavigationBar is a MaterialApp widget that displays a bottom fancy navbar, Where items go between 2 and 4. Bottom NavigationBar is the list of icons or text in the horizontal form called a tab and Each tab contains their own page. Step By Step ImplementationStep 1: Create a New Project
3 min read
Flutter - Difference Between ListView and List
Flutter is Google’s Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter everything is towards Widgets – the blocks with which the flutter apps are built. They are structural elements that ship with
4 min read
Listview.builder in Flutter
ListView is a very important widget in a flutter. It is used to create the list of children But when we want to create a list recursively without writing code again and again then ListView.builder is used instead of ListView. Â ListView.builder creates a scrollable, linear array of widgets. ListView.
3 min read
Flutter - Infinite Scroll Pagination
Infinite lists are a way to display paginated data efficiently. When a user scrolls to the end of the current page, more data is fetched and added to the list. This is also known as endless scrolling pagination, infinite scrolling pagination, auto-pagination, lazy loading pagination, and progressive
5 min read
Build a Simple Contact List App with Search Bar in Flutter
Contact List Application with Search Implementation is a simple app built on Flutter which can run on any of the devices, Android or iOS. This app will firstly ask for permission for accessing the contacts of you phone and then will display them. The main amazing thing in this app is adding a search
7 min read
Flutter - Scroll Snap List
The scroll_snap_list package provides a wrapper that wraps around the ListView.builder widget to enable snapping event on List items. It can be modified to horizontal or vertical snapping based on the requirements. It is also important to note that it doesn't make use of less or no animation. In thi
4 min read
ListWheelScrollView Widget in Flutter
ListWheelScrollView is a flutter widget that is used to build ListView with a 3D effect. We can also use ListView to create a list of items but we can't add a 3D effect to it plus it also comes with a constraint that all the children inside this widget must be of the same size along the strolling ax
7 min read
Flutter - Loading Progress Indicator Button
In this article, we will learn about the Loading Progress Indicator Button in Flutter. What is Loading Progress Indicator Button?Progress Indicator informs customers and users who are using the app about the ongoing Process such as loading an app, submitting a form, or uploading a document online. A
4 min read
Flutter - Create Option Menu for ListView
ListView is the efficient widget to display a list of items. Sometimes we need some options on individual items in the ListView. To create an options menu for a ListView in Flutter, you can use the PopupMenuButton widget along with PopupMenuItem or PopupMenuItemBuilder. This allows you to display a
5 min read