How to set TabBarView without appbar height automatically-CodePudding

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

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

CodePudding user response：

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


}

CodePudding user response：

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