How to set TabBarView without appbar height automatically

Question

I want to make tabbar without appbar, it's done but one thing is messed up, it's the height of TabBarView i want the height follow with the tabs content but it result error. I already try using Expanded but not working evrything just gone.

if you have free time please help:) i put my full code in my repo https://github.com/ccprogrammer/movies-app

here the image

here is my build code

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Const.colorPrimary,
      body: ListView(
        children: [
          _buildHeaders(),
          _buildTitle(),
          _buildTabBar(),
        ],
      ),
    );
  }

here is my tabbar code

Widget _buildTabBar() {
    return Column(
      children: [
        Container(
          height: 48.h,
          margin: EdgeInsets.fromLTRB(18.w, 50.h, 18.w, 0),
          padding: EdgeInsets.fromLTRB(4.w, 4.h, 4.w, 4.h),
          decoration: BoxDecoration(
            border: Border.all(color: Const.colorIndicatorBorder),
            borderRadius: BorderRadius.circular(50.r),
          ),
          child: TabBar(
            controller: _tabBarController,
            indicator: ShapeDecoration(
              shape: StadiumBorder(),
              color: Const.colorIndicator,
            ),
            labelStyle: Const.textPrimary.copyWith(fontSize: 14.sp),
            tabs: [
              Tab(text: 'Detail'),
              Tab(text: 'Reviews'),
              Tab(text: 'Showtime'),
            ],
          ),
        ),
        Container(
          height: MediaQuery.of(context).size.height * 1.4,
          child: TabBarView(
            controller: _tabBarController,
            children: [
              DetailsTab(),
              DetailsTab(),
              DetailsTab(),
            ],
          ),
        ),
      ],
    );
  }

here is the tabs code

 @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 32.h, 0, 0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSynopsis(),
          _buildCast(),
          _buildPhotos(),
          _buildVideos(),
          _buildBlogs(),
        ],
      ),
    );
  }

Answer 1

One of the best Way i Found for implemt Tabbar. I always flow this and implement it more then 10 applications.

checkout this solution from stackover flow

Answer 2

You can set height parameter in Tab widget:

Tab(text: 'Detail', height: 150,),

• update: This is my custom tabBar widget:

   class AppTabbedPage extends StatefulWidget { final List<Object> pages; final List<Tab> myTabs; const AppTabbedPage({Key? key, required this.pages, required this.myTabs}): super(key: key); @override _AppTabbedPageState createState() => _AppTabbedPageState(); } class _AppTabbedPageState extends State<AppTabbedPage> with SingleTickerProviderStateMixin { late TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(vsync: this, length: widget.myTabs.length); } @override void dispose() { _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( color: Colors.white, child: TabBar( labelStyle: AppStyles.subTitle16Style, isScrollable: true, labelColor: AppColors.darkBlue, controller: _tabController, tabs: widget.myTabs, unselectedLabelColor: AppColors.darkGrey, indicatorColor: AppColors.darkBlue, ), ), Expanded( child: TabBarView( controller: _tabController, children: widget.pages.map((page) { return page as Widget; }).toList(), ), ), ], ); } }