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.
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.