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