Home > database >  Scroll position lost if tab changed while scrolling animation is still ongoing
Scroll position lost if tab changed while scrolling animation is still ongoing

Time:08-17

I have 3 views which are accessible via the bottom navigation tab. Each view has its own ListView, which looks like this:

// primary = bottomTabNavigation.index // 
ListView(
  controller: primary ? null : scrollController,
  key: const PageStorageKey<String>('view1'),
  primary: primary,
  physics: primary
                  ? AlwaysScrollableScrollPhysics()
                  : NeverScrollableScrollPhysics(),
  children: const [
    Text("A"),
    SizedBox(height: 1000),
    Text("B"),
  ],
),

If I start a big swipe on view1, and switch to view2 via bottom tab navigator, the scroll position when I come back to view1 is still at the top. Somehow, the scroll position only saves upon the scrolling animation completing.

Is there some way to switch tabs and store the last position (without waiting for animation)?

CodePudding user response:

Create a Key outside the build method

final _key = GlobalKey();

CodePudding user response:

Step 1: make your widgets staefulWidget.

Step 2: now use AutomaticKeepAliveClientMixin using with keyword.

class _DealListState extends 
 State<DealList> with 
AutomaticKeepAliveClientMixin<DealList> 
{
 @override
 bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
  // your current widget build 
 }}

It will keep your listview and other states when you moves from one page to another.

Note: if it's impossible to change every page to stateful widget then just make a new StatefulWidget that use AutomaticKeepAliveClientMixin and will take a child widget from outside and now you can use this widget to wrap your already present widget and can be used through the app.

  • Related