Flutter rendering listView is overflowing

Question

I have this code for a chat app that renders a series of messages. The thing is page is showing ok, but when trying to send a message rendering overflow appears. It's like my input is going all the way up instead of setting itself over my displayed keyboard.

This is my code for rendering the page

 return Scaffold(
  body: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Flexible(
        child: ListView.builder(
          itemBuilder: (_, index) => _messages[index],
          itemCount: _messages.length,
          //El reverse hace que vaya de abajo hacia arriba
          reverse: true,
          padding: EdgeInsets.all(6.0),
        ),
      ),
      Divider(
        height: 1.0,
      ),
      Container(
        child: _buildComposer(),
        decoration: BoxDecoration(color: Theme.of(context).cardColor),
      )
    ],
  ),
);

And here I have my code for the input where think the mistake is

 Widget _buildComposer() {
return IconTheme(
  data: IconThemeData(color: Theme.of(context).accentColor),
  child: Container(
    margin: const EdgeInsets.symmetric(horizontal: 9.0),
    child: Row(
     // mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          child: TextField(
            controller: _textController,
            onChanged: (String texto) {
              setState(() {
                _isWriting = texto.length > 0;
              });
            },
            onSubmitted: _enviarMensaje,
            decoration:
                InputDecoration.collapsed(hintText: "Envie un mensaje!"),
          ),
        ),
        Container(
          margin: EdgeInsets.symmetric(horizontal: 3.0),
          child: IconButton(
            icon: Icon(Icons.message),
            onPressed: _isWriting
                ? () => _enviarMensaje(_textController.text)
                : null,
          ),
        )
      ],
    ),
  ),
);

}

Here are my print captures for initial rendering, after clicking inside the input to write some message

Here's my log, and it's supposed to be easy to understand the approach I should take but I'm not having any luck with it.

FYI: I have already tried this approach but did not seem to work StackOverflow answer on rendering

I have already gone through flutter.io docs but I'm not understanding the whole listview theory. If you have some insights I would appreciate them as well so I can deeply understand how it behaves.

`resizeToAvoidBottomPadding: false` might help.. have a look at https://stackoverflow.com/questions/51972371/bottom-overflow-by-30px/51972954#51972954 — Dinesh Balasubramanian, Aug 23 '18 at 14:31
Dinesh, you are awesome sir, saved my day! Thanks for your quick response. If you can, please set this response as an aswer so I can give closure to this question. — Matias, Aug 23 '18 at 14:37
the problem with resizeToAvoidBottomPadding is it doesn't push the content to top, so you won't see the last message in your screen. — diegoveloper, Aug 23 '18 at 14:44

score 1 · Accepted Answer · answered Aug 23 '18 at 14:48

1

resizeToAvoidBottomPadding: false might help.. have a look here

As @diegoveloper's comment, it will not resize which means it will not show content behind keyboard. Based on your use case you can choose option 1 or 2 in the above link

answered Aug 23 '18 at 14:48

Dinesh Balasubramanian

20,532
7
64
57

Flutter rendering listView is overflowing

1 Answers1