Menu
I'm trying to make a profile page, where the users info is at the top. And then have a tab view below that for different views.
This is the code I'm using at the moment, when I take the TabBarView out it doesn't through an error, and if I wrap the TabBarView in an Expanded the error RenderFlex children have non-zero flex but incoming height constraints are unbounded. comes up.
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(''), ), body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Padding( padding: EdgeInsets.all(10.0), child: Row( children: <Widget>[ CircleAvatar( minRadius: 45.0, backgroundImage: NetworkImage( 'https://www.ienglishstatus.com/wp-content/uploads/2018/04/Anonymous-Whatsapp-profile-picture.jpg'), ), Padding( padding: EdgeInsets.only(left: 10.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( 'Testing Name', style: TextStyle( fontSize: 22.0, color: Colors.grey.shade800, ), ), Text( '@testing_username', style: TextStyle( fontSize: 13.0, color: Colors.grey.shade800, ), ), ], ), ), ], ), ), DefaultTabController( length: 3, child: Column( children: <Widget>[ TabBar( tabs: <Widget>[ Tab( icon: Padding( padding: EdgeInsets.all(6.0), child: Image.asset( "assets/images/icons/butterlike.png", color: Colors.grey.shade800, ), ), ), Tab( icon: Padding( padding: EdgeInsets.all(6.0), child: Image.asset( "assets/images/icons/butterlike.png", color: Colors.grey.shade800, ), ), ), Tab( icon: Padding( padding: EdgeInsets.all(6.0), child: Image.asset( "assets/images/icons/butterlike.png", color: Colors.grey.shade800, ), ), ), ], ), TabBarView( children: <Widget>[ Container( color: Colors.grey, ), Container( color: Colors.green, ), Container( color: Colors.purple, ), ], ), ], ), ) ], ), ); } I did try a variation of this but couldn't get it to work.
242
To fix the vertical viewport was given unbounded height error, you can either set the shrinkWrap property of the ListView widget to true or wrap it inside the Expanded/SizedBox widget (with height property).
In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand". Clearly, the horizontal viewport here is referring to the TabBarView widget which is not given a height constraint.
The error message in console mentions this: "Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand".
Use a bounded widget like SizedBox or AspectRatio on the TabBarView itself: Note Your can also calcuate the height dynamicly if the height is not static. SizedBox ( height: height:MediaQuery.of (context).size.height // or every other size , child: TabBarView (), )
Wrap the parent widget (Column) with a limited height widget like SizedBox or AspectRatio. Then use the Expanded widget like this: Use a bounded widget like SizedBox or AspectRatio on the TabBarView itself: Note Your can also calcuate the height dynamicly if the height is not static.
The error description is clear, the TabBarView doesn't have a bounded height. the parent widget also doesn't have a bounded height. So, the Expanded widget will not solve this issue.
EDIT: below solutions are for above question(with columns).In general cases, use a ListView with shrinkWrap: true.(Or any other widgets with shrinkWrap)
There are some options:
1st Solution:
Wrap the parent widget(Column) with a limited height widget like SizedBox or AspectRatio. Then use the Expanded widget like this:
Expanded( child: TabBarView(...), ) 2nd Solution:
Use a bounded widget like SizedBox or AspectRatio on the TabBarView itself:
SizedBox( height: 300.0, child: TabBarView(...), ) Note Your can also calcuate the height dynamicly if the height is not static.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
