Flutter bottomsheet like snapchat

I want to create a bottomsheet with tabs inside it, and below the tabs there is a tabview can be scrolling without scroll the tabs and the handle above them. When the handle is pulled up, the bottomsheet expands to its maximum height without stopping at another height levels.

Like on Snapchat when you want to change your bitmoji clothes.

My tried:

    return Scafold(
    ....
    bottomSheet: DraggableScrollableSheet(
          maxChildSize: 0.7,
          minChildSize: 0.54,
          initialChildSize: 0.54,
          expand: false,
          builder: (context2, controller2) {
            return CustomScrollView(
              controller: controller2,
              physics: BouncingScrollPhysics(),
              slivers: [
                SliverAppBar(
                  pinned: true,
                  primary: false,
                  automaticallyImplyLeading: false,
                  centerTitle: true,
                  // snap: true,
                  // floating: true,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(30))),
                  title: Container(
                    width: s.width / 3,
                    margin: const EdgeInsets.symmetric(vertical: 10),
                    height: s.width / 60,
                    decoration: BoxDecoration(
                        color: AppColor.primary,
                        borderRadius: BorderRadius.circular(30)),
                  ),
                  bottom: TabBar(
                    controller: tabController,
                    isScrollable: true,
                    tabAlignment: TabAlignment.start,
                    physics: BouncingScrollPhysics(),
                    tabs: const [
                      Tab(child: Icon(Icons.ac_unit)),
                      Tab(
                        child: Icon(Icons.back_hand),
                      ),
                      Tab(
                        child: Icon(Icons.ac_unit),
                      ),
                      Tab(
                        child: Icon(Icons.back_hand),
                      ),
                      Tab(
                        child: Icon(Icons.ac_unit),
                      ),
                      Tab(
                        child: Icon(Icons.back_hand),
                      ),
                      Tab(
                        child: Icon(Icons.ac_unit),
                      ),
                      Tab(
                        child: Icon(Icons.back_hand),
                      ),
                      Tab(
                        child: Icon(Icons.ac_unit),
                      ),
                      Tab(
                        child: Icon(Icons.back_hand),
                      ),
                      Tab(
                        child: Icon(Icons.ac_unit),
                      ),
                    ],
                  ),
                ),
                SliverFillRemaining(
                  child: TabBarView(
                      physics: BouncingScrollPhysics(),
                      controller: tabController,
                      children: const [
                        Text(
                            "data\ngggg\ngggg\nggggg\ngggg\ng\ng\ng\ng\ng\ng\ng\n"),
                        Text("data2"),
                        Text("data"),
                        Text("data2"),
                        Text("data"),
                        Text("data2"),
                        Text("data"),
                        Text("data2"),
                        Text("data"),
                        Text("data2"),
                        Text("data"),
                      ]),
                )
              ],
            );
          },
        ),
       );

and the result:

• tabView content appears behind tabs
• When the handle is pulled up, the bottomsheet expands to multi levels.

a solution is wraps the DraggableScrollableSheet with a Material with shape.

 return Scafold(
...
bottomSheet: Material(
          clipBehavior: Clip.hardEdge,
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.vertical(top: Radius.circular(30))),
          child: DraggableScrollableSheet(
...

and you can remove the shape in the SliverAppBar. :)