How to make our list persistent, while navigating to different screens in flutter application?

Question

In my flutter application, the bottom navigation bar is present and there are two bottom navigation bar items. I am using a List view on both of the screen. When I navigate from one screen to another after some scrolling on that screen. I came back at top of the list not at the last position where I had left. How can I do persistence on both screens?

Solution 1

You can use PageStorage and PageBucket for saving ListView's scroll offset.

The working example is https://codepen.io/ntaoo/pen/LYpyrZJ .

The essential part is as below,

final bucket = PageStorageBucket(); _widgetOptions = <Widget>[ PageStorage( bucket: bucket, child: ListView( key: PageStorageKey<String>('0'), children: <Widget>[ Text( 'Index 0: Home Start\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n to... \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nEnd', style: optionStyle, ), ], ), ), PageStorage( bucket: bucket, child: ListView( key: PageStorageKey<String>('1'), children: <Widget>[ Text( 'Index 1: Business Start\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n to... \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nEnd', style: optionStyle, ), ], ), ), PageStorage( bucket: bucket, child: ListView( key: PageStorageKey<String>('2'), children: <Widget>[ Text( 'Index 2: School Start\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n to... \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nEnd', style: optionStyle, ), ], ), ), ];

ScrollController test code is a perfect usage example of keepScrollOffset'.

https://github.com/flutter/flutter/blob/master/packages/flutter/test/widgets/scroll_controller_test.dart#L313

Solution 2

You can set keepScrollOffset to true.. https://api.flutter.dev/flutter/widgets/ScrollController-class.html