samedi 1 août 2020

PageStorageKey not loading between navigation

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?




Aucun commentaire:

Enregistrer un commentaire