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

You can put one of the scrollable widgets around your content to allow it to scroll and prevent the error. — Herohtar, Mar 26 '18 at 16:03
hi Herohtar, yes indeed...today I was resolving the issue through https://docs.flutter.io/flutter/widgets/ListView-class.html in order to provide the scrolling functionality needed — oetoni, Mar 26 '18 at 16:08

RedBrogdon · Accepted Answer · 2019-12-20T18:51:13.060

104

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.

edited Dec 20 '19 at 18:51

answered Apr 02 '18 at 16:00

RedBrogdon

4,193
2
21
28

7

And what if you don't want it to scroll? In my case, I have a Card > ScopedModelDescendant > Column > Container. I don't want the column to scroll, but the Containers overflow it. Any ideas? – forresthopkinsa Apr 27 '19 at 18:12
7

First, I'd try setting the Column's crossAxisAlignment value to `stretch` or wrapping the Container in an Expanded widget. This will try and force it to be the correct size. If that doesn't work, you'd need to look at the children of the container and determine which one is preventing it from being the correct size. You can also try a FittedBox, which can scale/clip contents in order to make them fit. – RedBrogdon Apr 28 '19 at 19:11
1

@forresthopkinsa to prevent scrolling use `physics: NeverScrollableScrollPhysics()` in a `SingleChildScrollView` – SoftWyer Jun 22 '19 at 12:49
@Curly Thanks, but my question already got answered. Didn't need a ScrollView at all. – forresthopkinsa Jun 24 '19 at 20:13
@forresthopkinsa could you please share the solution? I am facing the same issue. Thanks in advance – madan Mar 02 '20 at 17:53
1

SingleChildScrollView works. Btw, you rock on YouTube! – live-love Apr 29 '20 at 01:41
If you have a simple layout with a single column that needs to scroll and you are facing this issue, you can wrap your column with a `SingleChildScrollView`. Thanks for the answer (Y) – ravi Sep 21 '20 at 10:24

score 17 · Answer 2 · answered May 19 '20 at 12:00

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 in SingleChildScrollView

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

Use ListView
```
ListView(
  children: children
)
```

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

score 8 · Answer 3 · answered May 10 '20 at 07:45

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

score 0 · Answer 4 · answered Aug 06 '20 at 19:07

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

In some cases adjusting the Size.fromHeight(120.0) fixes the rendering issue — Ayan Bhattacharjee, Aug 08 '20 at 04:41

score 0 · Answer 5 · answered Feb 28 '21 at 15:38

0

just wrap the body with SingleChildScrollView or ListView

body: SingleChildScrollView(
        child: <Widget> ...,
    )

answered Feb 28 '21 at 15:38

CodingEra

327
2
11

score 0 · Answer 6 · answered Mar 02 '21 at 23:06

0

I was also facing this issue, try this ....

resizeToAvoidBottomPadding: false,

Before the body part

answered Mar 02 '21 at 23:06

Pratibha Sahani

1

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

6 Answers6

Linked

Related