Make TabBarView take up all remaining space
Put TabBarView inside Expanded
widget
UglyBob
Updated on December 11, 2022Comments
-
UglyBob over 1 year
New to Flutter and can't figure out how to put size constraints on my UI so nothing overflows. Trying to make a little bit different UI with tabs, where I have some components above the tab bar. Basically I want something like this:
-------------------- | Container | -------------------- | TabBar | -------------------- | | | | | TabBarView | | | | | -------------------- | Container | --------------------
The problem is, I have no idea how to make the TabBarView take up the remaining space. My code example wont even run, just gives me an error like this:
I/flutter ( 3875): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 3875): The following assertion was thrown during performResize(): I/flutter ( 3875): Horizontal viewport was given unbounded height. I/flutter ( 3875): Viewports expand in the cross axis to fill their container and constrain their children to match I/flutter ( 3875): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of I/flutter ( 3875): vertical space in which to expand.
Widget build(BuildContext context) { List<Tab> myTabs = <Tab>[ Tab(text: 'TAB 1'), Tab(text: 'TAB 2'), Tab(text: 'TAB 3'), ]; Widget topBar = Container( padding: EdgeInsets.all(10), child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ Text("TEXT 1"), Text("TEXT 2"), Text("TEXT 3"), ], )); Widget bottomBar = Row( children: <Widget>[ RaisedButton(child: Text("Cancel")), RaisedButton(child: Text("OK")), ], ); return DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( title: Text("Test"), ), body: Column( children: <Widget>[ topBar, TabBar( tabs: myTabs, ), TabBarView( children: myTabs.map((Tab tab) { return Container( color: Colors.red, child: Text(tab.text) ); }).toList(), ), ], ), bottomNavigationBar: bottomBar, ), ); }