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

Answer 1

这是一个非常常见的问题，尤其是当您开始在多个设备和方向上测试您的应用时。 Flutter的Widget画廊有一个部分涵盖各种滚动小部件：

https://flutter.io/widgets/scrolling/

我建议您将整个内容整理到SingleChildScrollView，或使用滚动ListView。

Answer 2

假设您有100个List小部件中的Text个是这样的：

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

根据设备屏幕的不同，这些小部件可能会溢出，几乎没有解决方案。

Column

使用SingleChildScrollView

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

同时使用ListView和ListView( children: children )的组合（您应使用Column / ListView，或在{这样做）。
```
Expanded
```

Answer 3

尝试在Container或Widget中包装Flexible或其他Expanded的包装，将完成。

这样做

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

Answer 4

我也遇到了这个问题，试试这个....

resizeToAvoidBottomPadding: false,

身体部位之前

Answer 5

使用 SingleChildScrollView .. 希望它能解决您的问题..

Answer 6

您可以将文本包装在 PreferredSize 小部件中：

 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 7

只需用 SingleChildScrollView 或 ListView 包裹正文

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

Answer 8

您可以为列内的每个容器使用小部件 Expanded。然后使用 flex 进行正确的调整。

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

8 个答案: