Flutter (Dart): Exceptions caused by rendering / A RenderFlex overflowed

Question

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

Answer 1

Let's say you have a List of 100 Text widgets like this:

final children = List.generate(100, (i) => Text('Item $i')).toList();

Depending on the device screen, these widgets can overflow, there are few solutions to handle it.

1. Use Column wrapped in SingleChildScrollView

   SingleChildScrollView(
     child: Column(children: children),
   )
   

2. Use ListView

   ListView(
     children: children
   )
   

3. Use combination of both Column and ListView(you should use Expanded/Flexible, or give a fixed height to the ListView 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
       ),
     ],
   )