PageStorageKey not loading between navigation - flutter

Question

I've looked at just about every piece of info I can find on this subject but none of the solutions seem to be working for me. I have a persistent top nav bar that I pass the views through using a the MaterialApp builder function as shown below. Inside that NavFrame class I simply have two buttons to switch between views. The second view has a GridView with a PageStorageKey attached to it. If you scroll and switch between views you'll see the scroll position is not loaded when going back to the grid in view 2. I'm using the latest Auto-Route package for generating my routes.
main.dart
void main() {
runApp(MyApp());
}
final _navKey = GlobalKey<NavigatorState>();
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'PageStorageKey Debugging',
theme: ThemeData(
primarySwatch: Colors.green,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
initialRoute: Routes.view1,
navigatorKey: _navKey,
onGenerateRoute: Router().onGenerateRoute,
builder: (context, child) => NavFrame(_navKey, child),
);
}
}
nav_frame.dart
class NavFrame extends StatelessWidget {
final Widget child;
final GlobalKey<NavigatorState> _navKey;
const NavFrame(this._navKey, this.child, {Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
color: Colors.black,
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
onPressed: () {
_navKey.currentState.pushReplacementNamed(Routes.view1);
},
child: Text('View 1'),
),
SizedBox(
width: 50,
),
RaisedButton(
onPressed: () {
_navKey.currentState.pushReplacementNamed(Routes.view2);
},
child: Text('View 2'),
),
],
),
)),
Positioned(
top: 100,
left: 0,
right: 0,
bottom: 0,
child: Container(
child: child,
),
),
],
);
}
}
view1.dart
class View1 extends StatelessWidget {
const View1({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
child: Container(
color: Colors.blue,
))
],
);
}
}
view2.dart
class View2 extends StatefulWidget {
const View2({Key key}) : super(key: key);
#override
_View2State createState() => _View2State();
}
class _View2State extends State<View2>
with AutomaticKeepAliveClientMixin<View2> {
final bucket = PageStorageBucket();
#override
Widget build(BuildContext context) {
super.build(context);
return Column(
children: [
Expanded(
child: GridView.builder(
key: new PageStorageKey('test-key'),
addAutomaticKeepAlives: true,
padding: EdgeInsets.all(30),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 2,
crossAxisSpacing: 30,
mainAxisSpacing: 30,
),
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: BoxDecoration(
border: Border.all(width: 1.5, color: Colors.black),
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
child: Center(
child: Material(
child: Text(
index.toString(),
style: TextStyle(fontSize: 20),
),
),
));
},
),
)
],
);
}
#override
bool get wantKeepAlive => true;
}
router.dart
#MaterialAutoRouter(
generateNavigationHelperExtension: true,
routes: <AutoRoute>[
MaterialRoute(page: View1, initial: true),
MaterialRoute(page: View2, path: "/view2"),
],
)
class $Router {}
pubspec.yaml
name: PageStorageKeyTest
description: Debugging PageStorageKey.
publish_to: "none"
version: 1.0.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# Navigation
auto_route: 0.6.6
# Cupertino
cupertino_icons: ^0.1.3
dev_dependencies:
flutter_test:
sdk: flutter
build_runner: 1.10.1
auto_route_generator:
flutter:
uses-material-design: true
As mentioned I've tried many different suggested solutions I've been able to find. Currently in View2 you'll see I'm using the AutomaticKeepAliveCluentMixin with wantKeepAlive set to true. I did also make sure to call the super.build(context) as I saw suggested in one question on here. I also have tried using the PageStoreBucket in just about every place I can imagine and it doesn't seem to be doing anything. (Currently not being used in the above code). I've tried to set maintainState to true in the MaterialRoute. In my actual project where I'm running into this I'm using Stacked architecture and even tried passing the keys through the viewModel and having the viewModel builder only build once and nothing seems to be doing the trick. Running the above code should produce the exact issue I'm having. I'm also on the latest dev build I believe (1.21.0-1.0.pre). Any suggestions?

Answer 1

I was looking at this the wrong way from a UX perspective. You can achieved the desired effect of what I was talking about using a scrollController and saving the offset to a global variable or something and just reassigning it in the initState method to the initialOffset parameter of the scrollController. I used stacked architecture personally and stored the offset in a service class with a reactiveServiceMixin. This works for what I described, but it's not what I actually wanted, which I didn't realize until doing it and seeing it for myself. If you use the navigator to navigate to for example a shop page and then go to a blog and then click shop again from the navigator you would probably expect to be back to the beginning of the shop. When clicking the back button from the blog page to go back to the shop you would then probably expect it to save the scroll position. Turns out it was already doing all of that before implementing this.