Scrollable tabs within DraggableScrollableSheet

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: DraggableScrollableSheet(
        initialChildSize: 0.6,
        maxChildSize: 0.9,
        minChildSize: 0.6,
        builder: (context, scrollController) => DefaultTabController(
          length: 2,
          child: _buildNestedScrollView(scrollController),
          // child: _buildFlatCustomScrollView(scrollController),
          // child: _buildTabsCustomScrollView(scrollController),
        ),
      ),
    );
  }

  NestedScrollView _buildNestedScrollView(ScrollController scrollController) {
    return NestedScrollView(
      // controller: scrollController,
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        print('innerBoxIsScrolled $innerBoxIsScrolled');
        return [
          SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: SliverAppBar(
              toolbarHeight: 0.0,
              pinned: true,
              primary: false,
              forceElevated: innerBoxIsScrolled,
              bottom: TabBar(
                tabs: [
                  Tab(text: 'Foo'),
                  Tab(text: 'Bar'),
                ],
              ),
            ),
          ),
        ];
      },
      body: TabBarView(
        children: [
          ListView.builder(
            controller: scrollController,
            physics: ClampingScrollPhysics(),
            padding: EdgeInsets.zero,
            itemBuilder: (context, index) => Container(
              color: Colors.primaries[index % 10],
              height: 150.0,
            ),
          ),
          ListView.builder(
            // controller: scrollController,
            physics: ClampingScrollPhysics(),
            padding: EdgeInsets.zero,
            itemBuilder: (context, index) => Container(
              color: Colors.primaries[index % 10],
              height: 25.0,
            ),
          ),
        ],
      ),
    );
  }

  CustomScrollView _buildTabsCustomScrollView(
      ScrollController scrollController) {
    return CustomScrollView(
      // controller: scrollController,
      physics: ClampingScrollPhysics(),
      slivers: [
        SliverAppBar(
          toolbarHeight: 0.0,
          pinned: true,
          primary: false,
          bottom: TabBar(
            tabs: [
              Tab(text: 'Foo'),
              Tab(text: 'Bar'),
            ],
          ),
        ),
        SliverFillRemaining(
          child: TabBarView(
            children: [
              ListView.builder(
                controller: scrollController,
                physics: ClampingScrollPhysics(),
                padding: EdgeInsets.zero,
                itemBuilder: (context, index) => Container(
                  color: Colors.primaries[index % 10],
                  height: 150.0,
                ),
              ),
              ListView.builder(
                controller: scrollController,
                physics: ClampingScrollPhysics(),
                padding: EdgeInsets.zero,
                itemBuilder: (context, index) => Container(
                  color: Colors.primaries[index % 10],
                  height: 25.0,
                ),
              ),
            ],
          ),
        )
      ],
    );
  }

  CustomScrollView _buildFlatCustomScrollView(
      ScrollController scrollController) {
    return CustomScrollView(
      controller: scrollController,
      physics: ClampingScrollPhysics(),
      slivers: [
        SliverAppBar(
          toolbarHeight: 0.0,
          pinned: true,
          primary: false,
          bottom: TabBar(
            tabs: [
              Tab(text: 'Foo'),
              Tab(text: 'Bar'),
            ],
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return Container(
                color: Colors.primaries[index % 10],
                height: 150.0,
              );
            },
          ),
        )
      ],
    );
  }
}