How can i use TabBar inside SingleChildscrollView

Question

Currently i have this structure SingleChildScrollView -> Column, my TabBar is inside the column

Here is my script

SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TabBar(
                controller: _tabController,
                labelColor: Colors.black,
                unselectedLabelColor: Colors.black,
                indicatorColor: CustomColors.mainRed,
                tabs: [
                  Tab(text: 'Deskripsi Produk'),
                  Tab(text: 'Daftar isi'),
                ],
              ),
              TabBarView(
                controller: _tabController,
                children: <Widget>[
                  Html(
                    data: widget.product.description!,
                    style: {
                      // tables will have the below background color
                      "p": Style(padding: EdgeInsets.all(2.w)),
                    },
                  ),
                  GetBuilder<ProductDetailController>(
                    init: ProductDetailController(),
                    builder: (data) => ListView.builder(
                      shrinkWrap: true,
                      controller: scrollController,
                      padding: EdgeInsets.all(5.w),
                      physics: NeverScrollableScrollPhysics(),
                      itemCount: data.videos.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          dense: true,
                          leading: Icon(
                            Icons.check,
                            color: CustomColors.mainRed,
                            size: 12.sp,
                          ),
                          title: Text(
                            data.videos[index].video!.title!.toString(),
                            style: TextStyle(
                              fontSize: 12.sp,
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),

I got this error

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performResize():
Horizontal viewport was given unbounded height.
Viewports expand in the cross axis to fill their container and constrain their children to match
their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
vertical space in which to expand.

I don't set the height because, my tab 1 and my tab 2 will have dynamic content (so, the height cannot fixed) and below the tabbar i want to add another content too. How can i solve this ?

Answer 1

Try this, and remember to use a TabController and a PageController.

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  children:[ 
   DefaultTabController(
    length: 2,
    initialIndex: 0,
    child: Column(
      children: [
        TabBar(
            controller: _tabController,
            labelColor: Colors.black,
            unselectedLabelColor: Colors.black,
            indicatorColor: CustomColors.mainRed,
            tabs: [
              Tab(text: 'Deskripsi Produk'),
              Tab(text: 'Daftar isi'),
            ],
        ),
        ExpandablePageView(
          onScoll: (index) {
            controller.animateTo(index);
          },
          controller: _pageController,
          children: [
              Html(
                data: widget.product.description!,
                style: {
                  // tables will have the below background color
                  "p": Style(padding: EdgeInsets.all(2.w)),
                },
              ),
              GetBuilder<ProductDetailController>(
                init: ProductDetailController(),
                builder: (data) => ListView.builder(
                  shrinkWrap: true,
                  controller: scrollController,
                  padding: EdgeInsets.all(5.w),
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: data.videos.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      dense: true,
                      leading: Icon(
                        Icons.check,
                        color: CustomColors.mainRed,
                        size: 12.sp,
                      ),
                      title: Text(
                        data.videos[index].video!.title!.toString(),
                        style: TextStyle(
                          fontSize: 12.sp,
                        ),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ],
      ),
     ),
   ],
 );