CODEWITHSUNDEEP
flutterdartpaginationflutter-pagewise
VIN
VIN

Reputation: 6967

flutter_pagewise library does not preserve page (scroll) state on tabbing away

I am using the flutter_pagewise library and have implemented a paginated grid as per the library's documentation (following their example at https://pub.dev/packages/flutter_pagewise/example), which grabs placeholder images and text via the network.

In my app, I have 2 pages (one is called PaginatedGrid and the other is called SearchPage) that I can tab to via a BottomNavigationBar. However, when I tab to the SearchPage, then tab back to PaginatedGrid, the paginated grid scroll state isn't preserved. The pagination starts from the very beginning and the screen is scrolled back to the top.

import 'package:myproject/my_events/my_events_page.dart';
import 'package:myproject/search/search_page.dart';
import 'package:myproject/widget/paginated_grid.dart';
import 'package:flutter/material.dart';

class PageWrapper extends StatefulWidget {
  @override
  _PageWrapperState createState() => _PageWrapperState();
}

class _PageWrapperState extends State<PageWrapper> {
  ScrollController _scrollController = ScrollController();
  int _curIndex = 0;
  List<Widget> _pages;
  final bucket = PageStorageBucket();
  final Key searchPageKey = PageStorageKey('searchKey');
  final Key paginatedGridKey = PageStorageKey('paginatedGrid');

  @override
  void initState() {
    _pages = [
      PaginatedGrid(key: paginatedGridKey),
      SearchPage(key: searchPageKey)
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageStorage(
        bucket: bucket,
        child: CustomScrollView(
          key: PageStorageKey(_pages[_curIndex].runtimeType.toString()),
          controller: _scrollController,
          slivers: <Widget>[SliverAppBar(), _pages[_curIndex]],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (int i) {
          setState(() {
            _curIndex = i;
          });
        },
        currentIndex: _curIndex,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Browse',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          )
        ],
      ),
    );
  }
}


Any help would be appreciated.

Upvotes: 0

Views: 235

Answers (1)

VIN
VIN

Reputation: 6967

Using an indexedStack is a solution that worked! The paginated state is preserved on navigation to another tab from the bottom navigation bar.

Instead of using a PageStorage widget, use an IndexedStack widget.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: currentTab,
        children: pages,
      ),
      bottomNavigationBar: BottomNavigationBar(

The solution is described here: https://medium.com/@codinghive.dev/keep-state-of-widgets-with-bottom-navigation-bar-in-flutter-bb732214bd11

Upvotes: 0

Related Questions