ListView Flutter中的文本溢出问题

Question

I have a code with a floating button, textField and message list (ListView).

When user writes text to textField and presses the button, the text is appended to the ListView.

The code to generate textField and ListView is below:

body: new Column(children: 
    <Widget>[
      new Text(
        'You have pushed the button this many times:',
      ),
      new Text(
        '$_counter',
        style: Theme.of(context).textTheme.display1,
      ),
      new Flexible(
        fit: FlexFit.tight,
        child: new ListView.builder(
          padding: new EdgeInsets.all(8.0),
          itemExtent: 20.0,
          itemBuilder: (BuildContext context, int index) {
            return new Text(_getNthValue(index), overflow: TextOverflow.clip,);
          },
          itemCount: _listTexts.length,
        ), 
      ),
      new Divider(height: 2.0,),
      new TextField(
        controller: _controller,
        onChanged: _appendText,
      )
    ],
  ),

The issue is between these two: textField and ListView. When the number of items exceeds the limits of space before the Divider, the ListView continues to render the data on top of it and the textField: see photo below.

As you can see, three (3) of the last OKs on the bottom are overlapping their limits. In web world you could paint the background of textField so that the overflow is invisible but I could not do that and no any other trick to get the problem solved.

Between the textField on top of the page (not visible on photo), all works ok, the bounce stops inside the element, if you try to scroll too much.

What to do on the bottom, to make it obey the boundaries the same way as on top (no overflow)?

Answer 1

I found a solution. You have to have a ClipRect attached to Flexible like follows:

      new Flexible(
        child:
          new ClipRect(
            child:
              new ListView.builder(
                padding: new EdgeInsets.all(8.0),
                itemExtent: 20.0,
                itemBuilder: (BuildContext context, int index) {
                  return new Text(_getNthValue(index));
                },
                itemCount: _listTexts.length,
              ),
        ),
    ),

Flexible tells the ListView not to extend more than screen and ClipRect takes care there are not too many items that would overflow the text area.