Flutter - A Renderflex overflowed by 572 pixels on the bottom

Question

Hello, I have had some mistakes with Flutter when it comes to the issue of OVERFLOW of the edges. I made a Listview.Uilder and it has been overflowing vertically.

What I tried and didn’t work:

Wrap Up in the 'Children' with Flex, Flexible and Expanded.

I also tried with Singlechildscrollview with the scrollable property: Axis.vertical and it still didn’t work.

My question is How do flutter identify this list as SCROLLABLE? This was no longer meant to be happening due to Listview.Builder? My mistake is this:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (15581): The following assertion was thrown during layout:
I/flutter (15581): A RenderFlex overflowed by 572 pixels on the bottom.
I/flutter (15581):
I/flutter (15581): The relevant error-causing widget was:
I/flutter (15581):   Column
I/flutter (15581):   file:///C:/Users/vinca/Documents/Flutter%20projects/StarChat/synjolt_rastreio/synjolt_rastreio/lib/results_page.dart:150:16
I/flutter (15581):
I/flutter (15581): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter (15581): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (15581): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (15581): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (15581): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (15581): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (15581): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (15581): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (15581): like a ListView.
I/flutter (15581): The specific RenderFlex in question is: RenderFlex#dda8e relayoutBoundary=up2 OVERFLOWING:
I/flutter (15581):   needs compositing
I/flutter (15581):   creator: Column ← Center ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←
I/flutter (15581):     CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
I/flutter (15581):     _InkFeatures-[GlobalKey#47cf2 ink renderer] ← NotificationListener<LayoutChangedNotification> ←
I/flutter (15581):     PhysicalModel ← ⋯
I/flutter (15581):   parentData: offset=Offset(0.0, 0.0) (can use size)
I/flutter (15581):   constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=653.7)
I/flutter (15581):   size: Size(360.0, 653.7)
I/flutter (15581):   direction: vertical
I/flutter (15581):   mainAxisAlignment: start
I/flutter (15581):   mainAxisSize: max
I/flutter (15581):   crossAxisAlignment: center
I/flutter (15581):   verticalDirection: down
I/flutter (15581): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤```

Here comes the body code snippet, which is where the overflow comes from.

 body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Center(
              child: Column(
                children: <Widget>[
                  FutureBuilder<Pacote>(
                    future: fetchPacote(),
                    builder: (context, snapshot) {
                      if (snapshot.hasData)
                        return (Column(
                          children: <Widget>[
                            Text('Código de Rastreio: ' + snapshot.data.codigo),
                            Text('Serviço: ' + snapshot.data.servico),
                            Text('Host: ' + snapshot.data.host),
                            Text('Quantidade: ' +
                                snapshot.data.quantidade.toString()),
                            ListView.builder(
                                shrinkWrap: true,
                                itemCount: snapshot.data.eventos.length,
                                itemBuilder: (BuildContext context, int index) {
                                  return ListTile(
                                    title: Text(
                                        'Texto é um conjunto de palavras e frases encadeadas que permitem interpretação e transmitem uma mensagem. É qualquer obra escrita em versão original e que constitui um livro ou um documento escrito. Um texto é uma unidade linguística de extensão superior à frase.' +
                                            snapshot
                                                .data.eventos[index].status),
                                  );
                                })
                          ],
                        ));
                      else if (snapshot.hasError)
                        return Text("${snapshot.error}");

                      return CircularProgressIndicator();
                    },
                  ),
                ],
              ),
            ),

          ],
        ),
      ),

Answer 1

I don’t know how you want to assemble the layout of your screen, but I tried to tweak your Widgets tree to take some redundancies.

If I have changed the structure a lot, keep yours and use only the part explained in the section Explanation.

Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          FutureBuilder<Container>(
            future: fetchPacote(),
            builder: (context, snapshot) {
              if (snapshot.hasData)
                return Column(
                  children: <Widget>[
                    Container(
                      height: 250,
                      child: Column(
                        children: <Widget>[
                          Text('Código de Rastreio: ' +
                              snapshot.data.codigo),
                          Text('Serviço: ' + snapshot.data.servico),
                          Text('Host: ' + snapshot.data.host),
                          Text('Quantidade: ' +
                              snapshot.data.quantidade.toString()),
                        ],
                      ),
                    ),
                    Expanded(
                      child: ListView.builder(
                          shrinkWrap: true,
                          itemCount: snapshot.data.eventos.length,
                          itemBuilder: (BuildContext context, int index) {
                            return ListTile(
                              title: Text(
                                  'Texto é um conjunto de palavras e frases encadeadas que permitem interpretação e transmitem uma mensagem. É qualquer obra escrita em versão original e que constitui um livro ou um documento escrito. Um texto é uma unidade linguística de extensão superior à frase.' +
                                      snapshot.data.eventos[index].status),
                            );
                          }),
                    )
                  ],
                );
              else if (snapshot.hasError)
                return Text("${snapshot.error}");

              return CircularProgressIndicator();
            },
          ),
        ],
      ),
    );

Explanation

I put a Container which will contain a Column with the informative texts you need, I did this because in the case of your layout, you need to ListView within a widget called Expanded which is who will treat the size of your list within the available space... and so that everything fits, the components that do not have the Expanded need to have fixed sizes.

Thus leaving its layout divided into two parts

Header: Container size 250 possessing the information "Code", "Service"...

Body: List with flexible size, which will stay the size that remains on screen.