TabBar height expaned to rest of the screen-CodePudding

On one page I have DropDownSearch, SizedBox, TextButton and Tabs. Everything works fine but I have problem to set TabBarView height to be flexible to the bottom of the screen. I tried Flexible, Expanded (error: RenderFlex children have non-zero flex but incoming height constraints are unbounded) and Container/SizedBox with height: MediaQuery.of(context).size.height (error: A RenderFlex overflowed by 225 pixels on the bottom).

Any idea how to set the height of Container to fill rest of the screen? Or use different widget? Thanks!

body: Column(
        children: [
          DropdownSearch<String>( ... )
          const SizedBox(
            width: 10,
          ),
          TextButton(
            onPressed: () {

              setState(() {
              });
            },
            child: Text('Click me',),
          ),
          DefaultTabController(
          length: 3,
          child: Column(
            children: [
              Container(
                child: TabBar(
                  tabs: [
                    Tab(icon: Icon(Icons.directions_car)),
                    Tab(icon: Icon(Icons.directions_transit)),
                    Tab(icon: Icon(Icons.directions_bike)),
                  ],
                ),
              ),
              SizedBox(
                height: MediaQuery.of(context).size.height,
                child: TabBarView(
                  children: [
                    Icon(Icons.directions_car),
                    Icon(Icons.directions_transit),
                    Icon(Icons.directions_bike),
                  ],
                ),
              ),
            ],
          ),
        ),

CodePudding user response：

Wrap with Expanded widget to get available space. If you set full height on TabBarView there will be no space left for parent widget.

body: Column(children: [
// DropdownSearch<String>( ... )
const SizedBox(
  width: 10,
),
TextButton(
  onPressed: () {
    setState(() {});
  },
  child: Text(
    'Click me',
  ),
),
Expanded( //this one
  child: DefaultTabController(
    length: 3,
    child: Column(
      children: [
        Container(
          child: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.directions_car)),
              Tab(icon: Icon(Icons.directions_transit)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
        ),
        Expanded(  //this one 
          // height: MediaQuery.of(context).size.height,
          child: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ],
    ),
  ),
),
]));

CodePudding user response：

Instead of giving TabBarView screen height, wrap it with Expanded to get height as much as possible. ,try this:

Column(
          children: [
            SizedBox(
              width: 10,
            ),
            TextButton(
              onPressed: () {
                setState(() {});
              },
              child: Text(
                'Click me',
              ),
            ),
            Expanded( // <--- add this
              child: DefaultTabController(
                length: 3,
                child: Column(
                  children: [
                    Container(
                      child: TabBar(
                        tabs: [
                          Tab(icon: Icon(Icons.directions_car)),
                          Tab(icon: Icon(Icons.directions_transit)),
                          Tab(
                              icon: Icon(
                            Icons.directions_bike,
                          )),
                        ],
                      ),
                    ),
                    Expanded(// <--- add this
                      child: TabBarView(
                        children: [
                          Icon(Icons.directions_car),
                          Icon(Icons.directions_transit),
                          Icon(Icons.directions_bike),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        )