I'm trying to add a tab group in the middle of my screen, but I'm getting the Overflowed error.
This what I have
Expanded(
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
bottom: Radius.circular(0),
),
color: Colors.blueGrey,
),
child: ConstrainedBox(
constraints: BoxConstraints(),
child: DefaultTabController(
length: 3,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: TabBar(tabs: [
Tab(text: "Home"),
Tab(text: "Articles"),
Tab(text: "User"),
]),
),
ConstrainedBox(
constraints: BoxConstraints(),
child: Container(
height: MediaQuery.of(context).size.height,
child: TabBarView(children: [
Container(
child: Column(
children: [
Text("Home Body"),
Text("Home Body"),
Text("Home Body"),
Text("Home Body"),
],
),
),
Container(
child: Text("Articles Body"),
),
Container(
child: Text("User Body"),
),
]),
),
),
],
),
),
),
),
),
If I got it right, the error is coming from this line
height: MediaQuery.of(context).size.height,
but how can I sort it without adding a fixed value? (I assume giving a fixed value depending on the screen size I would have the same error right?)
----------------------------- Update:
Try the following code:
DefaultTabController(
length: 3,
child: Scaffold(
backgroundColor: Colors.blueGrey,
appBar: AppBar(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30.0),
bottom: Radius.circular(0.0),
),
),
elevation: 0.0,
backgroundColor: Colors.blueGrey,
bottom: const TabBar(
tabs: [
Tab(text: "Home"),
Tab(text: "Articles"),
Tab(text: "User"),
],
),
),
body: TabBarView(
children: [
Column(
children: const [
Text("Home Body"),
Text("Home Body"),
Text("Home Body"),
Text("Home Body"),
],
),
const Text("Articles Body"),
const Text("User Body"),
],
),
),
),
It is very simple, you must to wrap the colum widget that locate in the TabarView children by the SingleChildScrolView
and set primary: false
,
Playing around with the elements I found a solution that worked for me:
Expanded(
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
bottom: Radius.circular(0),
),
color: Colors.blueGrey,
),
child: DefaultTabController(
length: 3,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const TabBar(tabs: [
Tab(text: "Home"),
Tab(text: "Articles"),
Tab(text: "User"),
]),
Expanded(
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: const TabBarView(children: [
Text("Home Body"),
Text("Articles Body"),
Text("User Body"),
]),
),
),
],
),
),
),
),
],
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.