Example of having a layout with nested scrolling tabs with Slivers.

sliver_scroll.dart

// MIT License
//
// Copyright (c) 2019 Simon Lightfoot
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
//
import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.indigo,
        accentColor: Colors.pinkAccent,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  final tabContent = <Widget>[
    TabContent(
      index: 0,
      color: Colors.red,
    ),
    TabContent(
      index: 1,
      color: Colors.green,
      height: 1000.0,
    ),
    TabContent(
      index: 2,
      color: Colors.blue,
      height: 50.0,
    ),
    TabContent(
      index: 3,
      color: Colors.yellow,
      height: 250.0,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Material(
      child: TabbedPageLayout(
        title: 'Sliver Nested Scroll',
        tabs: <Tab>[
          Tab(text: 'First'),
          Tab(text: 'Second'),
          Tab(text: 'Third'),
          Tab(text: 'Forth'),
        ],
        tabBuilder: (BuildContext context, int index) {
          return tabContent[index];
        },
      ),
    );
  }
}

class TabbedPageLayout extends StatelessWidget {
  const TabbedPageLayout({
    Key key,
    @required this.title,
    @required this.tabs,
    @required this.tabBuilder,
  })  : assert(tabs != null && tabBuilder != null),
        super(key: key);

  final String title;
  final List<Tab> tabs;
  final IndexedWidgetBuilder tabBuilder;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabs.length,
      child: Material(
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverOverlapAbsorber(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                child: SliverPersistentHeader(
                  pinned: true,
                  delegate: HeaderDelegate(
                    context,
                    maxExtent: 300.0,
                    builder: (BuildContext context, double reveal) {
                      return PageHeader(
                        title: title,
                        reveal: reveal,
                        maxExtent: 300.0,
                        bottom: TabBar(
                          tabs: tabs,
                        ),
                      );
                    },
                  ),
                ),
              ),
            ];
          },
          body: TabBarView(
            children: List.generate(tabs.length, (int index) {
              return tabBuilder(context, index);
            }),
          ),
        ),
      ),
    );
  }
}

class PageHeader extends StatelessWidget {
  const PageHeader({
    Key key,
    @required this.title,
    @required this.reveal,
    @required this.bottom,
    this.maxExtent = 300.0,
  })  : assert(title != null, bottom != null),
        super(key: key);

  final String title;
  final double reveal;
  final Widget bottom;
  final double maxExtent;

  @override
  Widget build(BuildContext context) {
    return Material(
      elevation: 4.0,
      color: Theme.of(context).primaryColor,
      child: Stack(
        children: <Widget>[
          ClipRect(
            child: OverflowBox(
              minHeight: maxExtent,
              maxHeight: maxExtent,
              child: Image.network(
                'https://flutter.dev/assets/homepage/carousel/slide_2-bg-ec22a39fb182cb26ec8fb88b30064bc08707d4e87b0e7415c2f077c20d3e6102.jpg',
                fit: BoxFit.cover,
                color: Theme.of(context).primaryColorDark.withOpacity((1.0 - reveal)),
                colorBlendMode: BlendMode.dstATop,
              ),
            ),
          ),
          Stack(
            children: <Widget>[
              if (reveal < 1.0)
                Positioned(
                  top: 0.0,
                  left: 0.0,
                  right: 0.0,
                  child: Container(
                    height: kToolbarHeight * 1.5,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.bottomCenter,
                        end: Alignment.topCenter,
                        colors: <Color>[
                          Theme.of(context).primaryColor.withOpacity(0.0),
                          Theme.of(context).primaryColor,
                        ],
                        stops: <double>[
                          0.0,
                          1.0,
                        ],
                      ),
                    ),
                  ),
                ),
              if (reveal < 1.0)
                Positioned(
                  bottom: 0.0,
                  left: 0.0,
                  right: 0.0,
                  child: Container(
                    height: 48.0 * 1.5,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: <Color>[
                          Theme.of(context).primaryColor.withOpacity(0.0),
                          Theme.of(context).primaryColor,
                        ],
                        stops: <double>[
                          0.0,
                          0.8,
                        ],
                      ),
                    ),
                  ),
                ),
              SafeArea(
                bottom: false,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 16.0),
                      height: kToolbarHeight,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        title,
                        style: Theme.of(context).primaryTextTheme.title,
                      ),
                    ),
                    Expanded(
                      child: Align(
                        alignment: Alignment.bottomLeft,
                        child: bottom,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

typedef HeaderDelegateBuilder = Widget Function(BuildContext context, double reveal);

class HeaderDelegate extends SliverPersistentHeaderDelegate {
  HeaderDelegate(
    BuildContext context, {
    @required this.maxExtent,
    @required this.builder,
  })  : assert(maxExtent != null, builder != null),
        padding = MediaQuery.of(context).padding;

  final EdgeInsets padding;
  final HeaderDelegateBuilder builder;

  @override
  double get minExtent => padding.top + kToolbarHeight + 48.0;

  @override
  double maxExtent;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return builder(context, shrinkOffset / (maxExtent - minExtent));
  }

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}

class TabContent extends StatefulWidget {
  const TabContent({
    Key key,
    @required this.index,
    @required this.color,
    this.height = 0.0,
  })  : assert(index != null && color != null && height != null),
        super(key: key);

  final int index;
  final Color color;
  final double height;

  @override
  _TabContentState createState() => _TabContentState();
}

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

  @override
  Widget build(BuildContext context) {
    super.build(context); // AutomaticKeepAliveClientMixin
    final hsvColor = HSVColor.fromColor(widget.color);
    return Container(
      color: widget.height == 0.0 ? widget.color : null,
      child: Stack(
        children: <Widget>[
          CustomScrollView(
            key: PageStorageKey<String>('tab-${widget.index}'),
            slivers: <Widget>[
              SliverOverlapInjector(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              ),
              if (widget.height == 0.0)
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                      return ListTile(
                        title: Text('Item $index'),
                      );
                    },
                    childCount: 50,
                  ),
                )
              else
                SliverToBoxAdapter(
                  child: Container(
                    color: widget.color,
                    height: widget.height,
                    child: Placeholder(
                      color: hsvColor.withValue(hsvColor.value - 0.2).toColor(),
                    ),
                  ),
                ),
            ],
          ),
          Center(
            child: Text(
              'PAGE ${widget.index}',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24.0,
              ),
            ),
          ),
        ],
      ),
    );
  }
}