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(
                            "datanggggnggggngggggnggggngngngngngngngn"),
                        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.