Scrollable tabs within DraggableScrollableSheet – issue exploration

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

Thank but when we are in Bar tabs we cant control the Sheet :/
I try to make same as google map , show all sections but the tabs is sliverpersistantheader, click on tab go to the good section.
Works nice in Scaffold but not in DraggableBottomSheet :/

Hi guys, this gist was made to explore an issue with NestedScrollViews in the DraggableBottomSheet. It is still open in the Flutter repository.

@Matix-Media – the other functions are example attempts to work around the issue.

@Jack74r – unfortunately yes this is one of the issues with the current implementation in Flutter.

Looks like someone did eventually respond to my Stack Overflow question so you could try the solution there. Good luck!