Question 183109 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Change fixed height to variable height when using TabBarViews

I have a screen with tabBarViews and I currently have set the container height to:

 //TODO: change to dynamic height
 content: Container(height: MediaQuery.of(context).size.height*0.8, child: _tabBarBodyViews()),

I would like to set my height to a variable height with an expanded or flexible. I am not sure how to accomplish that because when I put an expanded or flexible it throws RenderBox errors.

This is my full code:

    return MaterialApp(
      home: Scaffold(
        resizeToAvoidBottomInset: true,
        floatingActionButton: FloatingDetailPersonButton(viewModel),
        body: SingleChildScrollView(
          controller: viewModel.scrollController,
          child: Container(
            
            child: _doctorInformationTabBar(context),
          ),
        ),
      ),
    );

 DefaultTabController _doctorInformationTabBar(BuildContext context) {
    return DefaultTabController(
      initialIndex: 0,
      length: 6,
      child: Column(
        children: [
          StickyHeader(
            header: Column(
              children: [
                DetallePersonaHeader(viewModel: viewModel),
                Container(
                  padding: EdgeInsets.all(5),
                  decoration: const BoxDecoration(
                    color: kHeaderColor,
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(20),
                        bottomRight: Radius.circular(20)),
                  ),
                  child: _tabBar(context),
                ),
              ],
            ), 
            //TODO: This has a strange behavior, it should be fixed
            content: Container(height: MediaQuery.of(context).size.height*0.8, child: _tabBarBodyViews()),
          )
        ],
      ),
    );
  }

  TabBarView _tabBarBodyViews() {
    return TabBarView(children: [
      VisitGeneralInformationTab(viewModel: viewModel),
      VisitListTab(viewModel: viewModel),
      AccPromoTab(viewModel: viewModel),
      InteractionsTab(),
      AuditoryTab(viewModel: viewModel),
      QuizTab(viewModel: viewModel)
    ]);
  }
}

As you can see my _tabBarBodyViews has TabBarViews. Each view have dynamic height depending on API content. I can set a size.height * 4 but this would give me a big blank space on shorter views.

I hope you can help me. Thanks in advance!

Tags:

2

Answers


  1. 0

    I don’t know the full context of your code, but I do know Expanded is probably what you’re going for here, yeah.

    The key is to make sure that Expanded is always placed directly inside of a Row, Column, or Flex. But then along with that, the flex/column/row has a direct parent that has a specific/bounded HEIGHT and WIDTH. Expanded will expand in both directions even if it’s placed specifically for example in a column (so you might be fooled into thinking it will only expand in height).

    Perhaps something like this:

    content: Container(
  height: MediaQuery.of(context).size.height - actualPixelHeightOfHeader,
  width: MediaQuery.of(context).size.width,
  child: Column(
    children: [
      Expanded(
        child: _tabBarBodyViews(),
      ),
    ],
  ),
),

    You might need to fiddle around with different values for the height of the container if you don’t know the exact height of the header.

    Login or Signup to reply.
  2. 0

    You can use a CustomScrollView and add a list of slivers. For example:

    const List<Tab> tabs = [Tab(...), Tab(...)];
final TabController controller = TabController(...);

CustomScrollView(
  controller: _scrollController,
  slivers: [
    SliverAppBar(
      flexibleSpace: FlexibleSpaceBar(
        title: Row(
          children: [
            TabBar(
              onTap: (int index) {
                if (onTap != null) {
                  onTap!(index: index, tabs: tabs);
                }
              },
              labelPadding: labelPadding,
              isScrollable: true,
              tabs: tabs,
              controller: controller,
              unselectedLabelColor: unselectedLabelColor,
            ),
          ],
        ),
      ),
    ),
    SliverToBoxAdapter(
      child: MyWidget(),
    ),
  ],
),

    That ought to get you in the right ballpark. Let me know if it works or not.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search