Demo of using SliverAppbar with tabs.

sliver_appbar_with_tabs.dart

// Sliver appbar with tabs.
// Adapted from: https://stackoverflow.com/a/50858058

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: SilverAppBarWithTabBarScreen(),
    ));

class SilverAppBarWithTabBarScreen extends StatefulWidget {
  @override
  _SilverAppBarWithTabBarState createState() => _SilverAppBarWithTabBarState();
}

class _SilverAppBarWithTabBarState extends State<SilverAppBarWithTabBarScreen>
    with SingleTickerProviderStateMixin {
  TabController controller;

  @override
  void initState() {
    super.initState();
    controller = TabController(
      length: 3,
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text("SilverAppBar title"),
            // pinned: true,
            snap: true,
            floating: true,
            expandedHeight: 160.0,
            // **Is it intended ?** flexibleSpace.title overlaps with tabs title.
            flexibleSpace: FlexibleSpaceBar(
              title: Text("FlexibleSpace title"),
            ),
            bottom: TabBar(
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
              controller: controller,
            ),
          ),
          // SliverList(
          SliverFillRemaining(
            child: TabBarView(
              controller: controller,
              children: <Widget>[
                Center(child: Text("Tab one")),
                Center(child: Text("Tab two")),
                Center(child: Text("Tab three")),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

preview:

The FlexibleSpaceBar will stack on the TabBar. Note this is intended behavior, according to the doc:

"If a flexibleSpace widget is specified then it is stacked behind the toolbar and the bottom widget."

There's an issue opened on how to do this correctly.

thank you dude this was really helpful

This is interesting, however, what would happen if there is a ListView.builder inside the TabBarView. How will the scroll event be handled?

What I am basically after is this scrolling behaviour.

When the app screen loads, all scrolling events to be handled by the CustomScrollView up until the ListView comes into view in the TabBarView.

Once the list view is on screen, let it handle all downward scroll. When the user starts to scroll to the top then scroll up till the first item of the list view and then propagate this scroll event to the CustomScrollView.

I tried looking at the ScrollPhysics attribute of the ListView but could not make sense of it.

ok I just stumbled upon the nested scroll view for this it does what I wanted https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html.

Thanks dude, btw, just remove the flexible space completely but leave the title of the SliverAppBar, it will have whatsapp like effect, just in case someone needs that effect