Flutter: Tabs with NestedScrollView and SliverAppBar

Question

To be brief, I would like this behaviour (mutliple tabs with the appBar hidding when scroll to bottom, and AppBar showing when I scroll to top), and I would like to retain scroll positions for each tabs:

I already have all my tabs with a scrollController for each, but if I understand well, to implement the SliverAppBar , I need to have only one scroll controller, used in the main NestedScrollView , right ?

And a ScrollController can only be attached to one ScrollView . So how can I manage my ScrollViews ( StaggeredGridView ) to retain my scroll positions ?

I saw the property ScrollController.positions and the PrimaryScrollController class but I don't know if these are the solutions.

If someone have an idea :)

Answer 1

An easy solution would be this package extended_nested_scroll_view .

Here's how I implemented your wanted scroll-behaviour (multiple tabs with the appBar hiding when scrolling to bottom, and AppBar showing when I scroll to top):

(It's not polished but you can work with it)

import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
      headerSliverBuilder: (context, isScrolled) {
        return [SliverAppBar(
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),
          title: Text('Pets'),
          centerTitle: false,
          actions: [
            IconButton(
              icon: Icon(Icons.share),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.pets),
              onPressed: () {},
            ),
          ],
        )];
      },
      body: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: TabBar(
            labelColor: Colors.black,
            tabs: [
              Tab(text: 'Dogs',),
              Tab(text: 'Cats'),
              Tab(text: 'Birds'),
            ],
          ),
          body: TabBarView(
            children: [
              Center(child: Icon(Icons.pets, color: Colors.blue)),
              Center(child: Icon(Icons.pets, color: Colors.green)),
              Center(child: Icon(Icons.pets, color: Colors.red)),
            ],
          ),
        ),
      )
    );
  }
}

Result:

I used a Scaffold inside the NestedScrollView with a SliverAppBar , with these you get practically 2 individual AppBar 's and the SliverAppBar hides when scrolling up. To retain the scroll positions of each Tab I would use 3 independent ScrollController . If you need more help with these just write a comment ;)