Scroll position not preserved when switching tabs

[rexalvinchan]

Thank you for all your work on this great package!

I encountered this issue when I included a MasonryGridView in 3 separate tabs. This issue happens when scrolling, switching tabs, and going back or some combination thereof.

To consistently reproduce it, scroll to the last item in "Tab 1". Then switch to "Tab 2" and then switch back to "Tab 1". In "Tab 1" the MasonryGridView jumps almost to the top which is unexpected. PageStorageKey should maintain the state just like for GridView and ListView.

I am using Flutter 3.19.6, Dart 3.3.4, and 0.7.0 of the package.

Here is the code to reproduce the issue. I've included GridView and ListView builders so you can see that the scroll position is preserved for them. Just comment out and uncomment as needed.

Any chance this could be fixed soon so we can show off this cool masonry view to our users?

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
            title: const Text('Masonry Grid View Tabs'),
          ),
          body: const TabBarView(
            children: [
              MasonryGrid(name: 'Grid 1'),
              MasonryGrid(name: 'Grid 2'),
              MasonryGrid(name: 'Grid 3'),
              // Grid(name: 'Grid 1'),
              // Grid(name: 'Grid 2'),
              // Grid(name: 'Grid 3'),
              // ListOfNumbers(name: 'List 1'),
              // ListOfNumbers(name: 'List 2'),
              // ListOfNumbers(name: 'List 3'),
            ],
          ),
        ),
      ),
    );
  }
}

Widget Function(BuildContext, int) itemBuilder = (BuildContext context, int index) => Container(
      color: Colors.green,
      child: Center(
        child: CircleAvatar(
          backgroundColor: Colors.white,
          child: Text('${index + 1}'),
        ),
      ),
    );

class MasonryGrid extends StatelessWidget {
  const MasonryGrid({super.key, required this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return MasonryGridView.builder(
      key: PageStorageKey<String>(name),
      gridDelegate: const SliverSimpleGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: 100,
      itemBuilder: itemBuilder,
      mainAxisSpacing: 4.0,
      crossAxisSpacing: 4.0,
    );
  }
}

class Grid extends StatelessWidget {
  const Grid({super.key, required this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      key: PageStorageKey<String>(name),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: 100,
      itemBuilder: itemBuilder,
    );
  }
}

class ListOfNumbers extends StatelessWidget {
  const ListOfNumbers({super.key, required this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      key: PageStorageKey<String>(name),
      itemCount: 100,
      itemBuilder: itemBuilder,
    );
  }
}

[mihirkoladiya]

have you found any solution?

[mihirkoladiya]

images-re-rendering-.mp4

[AlperenOvak]

I have the same problem, I used GridView and it worked as expected but when I switched it with MasonryGridView because of the UI improvement, I can not keep the scroll position when I change the page and come back. Anysuggestions or any advice might be very helpful.

Thank you!