Flutter - Preserve Scroll Position of ListView Using Page Storage
Last Updated :
28 Apr, 2025
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 Appbar
- The elevated button is used with help of which we will navigate to the next page MyList where 100 ListItems are there
Dart
import 'package:flutter/material.dart';
import 'package:preserve_scroll_position/list_Of_Items.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({ Key? key }) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeeksForGeeks', style: TextStyle(color: Colors.white),),
), // elevated button used
body: Center(
child: ElevatedButton(
onPressed: (){
Navigator.push(context,
MaterialPageRoute(builder: (context)=> const MyList()),
);
},
child: Text('Page Storage Key') ),
),
);
}
}
Step2 : Building list_Of_Items.dart page
We have used ListView.builder to create 100 list items by keeping itemCount to 100.
Dart
import 'package:flutter/material.dart';
class MyList extends StatefulWidget {
const MyList({Key? key}) : super(key: key);
@override
State<MyList> createState() => _MyListState();
}
class _MyListState extends State<MyList> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) => Card(
child: ListTile(
title: Text(
'List Item ${index + 1}',
style: TextStyle(fontSize: 25),
)),
)));
}
}
Output Video:
Point of Focus
When we click the elevated button. We get navigated to the list items page where 100 list items are there. Now if we left the item page on List Item 24 and went back and again press the elevated button this list item page is getting rebuilt from the start. See the video below:
Now to fix this issue where we want to preserve the state where we left last time and when we return back the list should start from where we left earlier. For this Flutter comes with Widget called PageStorage.
What is Page Storage?
PageStorage is used to save and restore values that can outlive the widget. For example, when multiple pages are grouped in tabs when a page is switched out, its widget is destroyed and its state is lost. By adding a PageStorage at the root and adding a PageStorageKey to each page, some of the page's state (e.g. the scroll position of a [Scrollable] widget) will be stored automatically in its closest ancestor [PageStorage], and restored when it's switched back. Now let's edit the code again to see the desired result
Step 3: Implementing Pagestorage Widget in list_Of_item.dart file
- Adding page storage key in ListView.builder
- Wrap the ListView.builder widget with PageStorage Widget
- Now add bucket property in PageStorage Widget which is compulsory to add
- Now initialize the Bucket storage globally so that we can use it anywhere in the program
- Now run the code
Dart
import 'package:flutter/material.dart';
// initialize bucket globally
final pageBucket = PageStorageBucket();
class MyList extends StatefulWidget {
const MyList({Key? key}) : super(key: key);
@override
State<MyList> createState() => _MyListState();
}
class _MyListState extends State<MyList> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageStorage(
// using page storage widget
// bucket property used as
// it is mandatory
bucket: pageBucket,
child: ListView.builder(
key: PageStorageKey<String>(
'pageOne'), // giving key to ListView Builder
itemCount: 100,
itemBuilder: (context, index) => Card(
child: ListTile(
title: Text(
'List Item ${index + 1}',
style: TextStyle(fontSize: 25),
)),
)),
));
}
}
Output:
Now if you see the output:
- We left the Items Page on ListItem 13 and clicked the back button
- Again as we pressed the elevated button we were brought back to the ListItem 13 where we left earlier
So this is how we use PageStorage in flutter which helps to preserve the state where we left it earlier.
Similar Reads
Flutter - Navigation to Previous Screen using GetX Library Function When we are using any app then we do navigation to navigate between screens. Sometimes, we want to return to the previous screen, so we normally use Navigator.pop(context). This is using context, and sometimes we find shortcuts to do the task easily. For that, we haveGet.back()in flutter. We can sen
5 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
Flutter - Navigation to Next Screen using GetX Library Function When we want to navigate between the screens in flutter then we use Navigator in Flutter. It uses context and builders for navigation. Sometimes, we pass the data to the next screen and fetch data on the next screen. When we use Navigator in flutter then its syntax is very large and it's not a good
3 min read
Flutter - Scroll Down to Bottom or Top of List in ListView 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 t
5 min read
Flutter - Reorderable ListView Generally, every android and iOS application contains a List of items, for example, WhatsApp chats are an example of a list, also in Facebook messenger, there is a huge list of user chats. These lists are not draggable i.e., we can not drag the specific list item to upper or lower, But in this artic
3 min read
Flutter - Send Data to Screen using RouteSettings Interaction with the UI is an integral part of any application. But more often than not, the information needs to be sent from one screen to another. For instance, say you need to pass data regarding a selected or tapped component of the UI to another route(i.e., page). In this article, we will expl
4 min read