Using PageStorage and Keeping offset of Scrollable Widgets in flutter

So Now I’m going to show how to use PageStorage

and I also did a lot of mistakes until I learned how to use it

If you wish to use it without any mistakes follow my Examples with attention

For a start We have to create Our class

So PageStorage is used to store offset of scrollableWidget for example: ListView,GridView,PageView and many others.

I am going to show two of the Widgets above.

Before that we should create some variables and functions to give to the PageStorage:

1. create PageStorageKey and PageStorageBucket;

It should be created in each page detached if you want to use more than one scrollable widget For Example:

2. create variables and list for BottomNavigationBar(By The Way I will show BottomNavigationBar too:).

3.We will get instance with initState to increase performance from Classes below

P/S: if you want to use more than one scrollable widgets in one page

you do not need to give key to the page as I did below

here is my ListClass:

The SecondClass is also the same with this, only it’s named ListClass2.

I gave key to each Scrollable widget separatedly

because there are 2 Scrollable Widgets

and if I do not give keys one by one Scroll offset of both Widgets will be stored the same like this:

So now just give pages with _activeIndex to the body

body: pages[_activeIndex],

the _activeIndex is used in BottomNavigationBar and You can find bottomNavigationBar property in Scaffold before or after the appBar/body:

As you are seeing it’s quite easy to make BottomNavigationBar(it has many other features too, If you don’t understand it well there are a lot of posts about it.)

So Now It should 100% work or if you use 2.5.1 or later version of Flutter it has a little difference and in that case it should work 99% 😜

Here is my full Code Source

Happy Coding