Flutter (Dart): Exceptions caused by rendering / A RenderFlex overflowed
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 ), ], )
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:
https://github.com/flutter/flutter/blob/e3005e6962cfefbc12e7aac56576597177cc966f/packages/flutter/lib/src/widgets/basic.dart#L3724
The Flutter website also contains a tutorial on building layouts and an interactive codelab about how to use Row
and Column
widgets.
I was also facing this issue, try this ....
resizeToAvoidBottomPadding: false,
Before the body part