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

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"),
                          ],
                        ),
                      ],
                    )),

Answer 2

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.

Answer 3

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.

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
       ),
     ],
   )
   

Answer 4

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"),
                    );
                  },
                ),
              ),
            )