Flutter (Dart): Exceptions caused by rendering / A RenderFlex overflowed
MobileDartRenderingOverflowFlutterMobile Problem Overview
I have a problem with Flutter (Dart) RenderFlex overflowed pixels. An exception of rendering library.
How can I manage or apply scrolling ability to my app page view and avoid Flutter's rendering exceptions with messages like:
> A RenderFlex overflowed by 28 pixels on the bottom.
if you by any chance need the full log to help me is here:
on the hot-reload it comes up with the yellow/black stripes at the bottom as per the message.
Is this something I can manage with a scrollable widget? Or I can declare otherwise my widgets in order to control it?
full code if needed (i changed the Text data but assume the texts appearing are longer than the screen size, and thus the error comes up):
@override
Widget build(BuildContext context) {
return new DefaultTabController(
length: 3,
child: new Scaffold(
appBar: new AppBar(
bottom: new TabBar(
tabs: [
new Tab(text: "xxx",),
new Tab(text: "xxx",),
new Tab(text: "xxx",),
],
),
title: new Text(data["xxx"]),
),
body: new TabBarView(
children: [
new Column(
children: <Widget>[
new Text(data["xxx"],
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.blue,
fontSize: 16.0
),),
new Text(data["xxx"],
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.blue,
fontSize: 10.0
),),
new Text(data["xxx"],
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.blue,
fontSize: 16.0
),),
new Text(data["xxx"],
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.blue,
fontSize: 8.0
),
),
new Text(data["xxx"],
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.blue,
fontSize: 8.0
),),
new Row(
children: <Widget>[
new Expanded(
child: new Text("xxx"),
),
new Expanded(
child: new Icon(Icons.file_download, color: Colors.green, size: 30.0,),
),
],
),
new Divider(),
new Text("xxx",
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.red,
fontSize: 16.0
),
),
],
),
new ListView.builder(
itemBuilder: (BuildContext context, int index) => new EntryItem(_lstTiles[index]),
itemCount: _lstTiles.length,
),
new Column(
children: <Widget>[
new Text(data["xxx"],
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.green[900],
fontSize: 16.0
),
),
new Text(data["xxx"],
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.green[900],
fontSize: 16.0
),),
new Text(data["xxx"]),
new ListTile(title: new Text("xxx")),
new Text(data["xxx"]),
new ListTile(title: new Text("xxx")),
new Divider(),
new Text("xxx",
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.red,
fontSize: 16.0
),
),
],
),
],
),
),
);
}
Mobile Solutions
Solution 1 - Mobile
This is a pretty common issue to run into, especially when you start testing your app on multiple devices and orientations. Flutter's Widget gallery has a section covering the various scrolling widgets:
https://flutter.io/widgets/scrolling/
I'd recommend either wrapping your entire content in a SingleChildScrollView
, or using a scrolling ListView
.
EDIT: This question and answer have gotten some notice, so I'd like to provide a little more help for those who land here.
The Flutter SDK team puts a lot of effort into good documentation within the SDK code itself. One of the best resources for understanding the algorithm that Flex
widgets (Row
and Column
are both subclasses of Flex
) use to lay out their children is the DartDoc that accompanies the class itself:
The Flutter website also contains a tutorial on building layouts and an interactive codelab about how to use Row
and Column
widgets.
Solution 2 - Mobile
Let's say you have a List
of 100 Text
widgets like this:
final children = List<Widget>.generate(100, (i) => Text('Item $i')).toList();
Depending on the device screen, these widgets can overflow, there are few solutions to handle it.
-
Use
Column
wrapped inSingleChildScrollView
SingleChildScrollView( child: Column(children: children), )
-
Use
ListView
ListView( children: children )
-
Use combination of both
Column
andListView
(you should useExpanded
/Flexible
, or give a fixed height to theListView
when doing so).Column( children: [ ...children.take(2).toList(), // show first 2 children in Column Expanded( child: ListView( children: children.getRange(3, children.length).toList(), ), // And rest of them in ListView ), ], )
Solution 3 - Mobile
try to wrap of Container
or any of other Widget
in Flexible
or Expanded
and it Will be done.
Do like this
Flexible(
child: Container(
padding: EdgeInsets.all(5),
height: 400,
width: double.infinity,
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 4,
itemBuilder: (context, index) {
return ListTile(
title: Text("Tony Stark"),
subtitle: Text("A Iron Man"),
);
},
),
),
)
Solution 4 - Mobile
I was also facing this issue, try this ....
resizeToAvoidBottomPadding: false,
Before the body part
Solution 5 - Mobile
You can use the widget Expanded
for each container inside the column. And then use flex
to make the correct adjustments.
Solution 6 - Mobile
You can wrap the text in PreferredSize widget:
bottom: PreferredSize(
preferredSize: Size.fromHeight(120.0),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(
right: 5.0, left: 5.0, bottom: 2.0, top: 2.0),
child: Text(
hospitalName,
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 14.0),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Container(
height: 1.0,
width: MediaQuery.of(context).size.width,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(
top: 2.0, right: 5.0, left: 5.0, bottom: 2.0),
child: Text(
doctorName,
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 14.0),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Container(
height: 1.0,
width: MediaQuery.of(context).size.width,
color: Colors.white,
),
),
TabBar(
isScrollable: true,
tabs: [
Tab(
text: "Tab1",
),
Tab(text: "Tab2"),
Tab(text: "Tab3"),
],
),
],
)),
Solution 7 - Mobile
For me, I added a text to one of row children, i was fetching data from firebase and it was null. So make sure there is some data coming.