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(const App());
}

@immutable
class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.light,
        colorSchemeSeed: Colors.indigo,
        //accentColor: Colors.pinkAccent,
      ),
      home: const Home(),
    );
  }
}

@immutable
class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  final tabContent = const <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: const <Tab>[
          Tab(text: 'First'),
          Tab(text: 'Second'),
          Tab(text: 'Third'),
          Tab(text: 'Forth'),
        ],
        tabBuilder: (BuildContext context, int index) {
          return tabContent[index];
        },
      ),
    );
  }
}

@immutable
class TabbedPageLayout extends StatelessWidget {
  const TabbedPageLayout({
    super.key,
    required this.title,
    required this.tabs,
    required this.tabBuilder,
  });

  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),
                sliver: 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);
            }),
          ),
        ),
      ),
    );
  }
}

@immutable
class PageHeader extends StatelessWidget {
  const PageHeader({
    super.key,
    required this.title,
    required this.reveal,
    required this.bottom,
    this.maxExtent = 300.0,
  });

  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>[
          Positioned(
            left: 0.0,
            right: 0.0,
            height: maxExtent,
            child: ClipRect(
              child: OverflowBox(
                minHeight: maxExtent,
                maxHeight: maxExtent,
                child: Image.network(
                  'https://lh3.googleusercontent.com/--L0Km39l5J8/URquXHGcdNI/AAAAAAAAAbs/3ZrSJNrSomQ/s240-c/Antelope%252520Butte.jpg',
                  fit: BoxFit.cover,
                  color: Theme.of(context).primaryColorDark.withOpacity((1.0 - reveal)),
                  colorBlendMode: BlendMode.dstATop,
                ),
              ),
            ),
          ),
          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: const <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: const <double>[0.0, 0.8],
                  ),
                ),
              ),
            ),
          SafeArea(
            bottom: false,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  height: kToolbarHeight,
                  alignment: Alignment.centerLeft,
                  child: Text(
                    title,
                    style: Theme.of(context).primaryTextTheme.titleMedium,
                  ),
                ),
                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,
  }) : 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({
    super.key,
    required this.index,
    required this.color,
    this.height = 0.0,
  });

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

  @override
  State<TabContent> 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: const TextStyle(
                color: Colors.white,
                fontSize: 24.0,
              ),
            ),
          ),
        ],
      ),
    );
  }
}