Listview is not displayed below a 'Container'

Question

I’m new to the flutter and I’m having a hard time showing a Listview below a Container. In the codex lattice below is displayed only mine Container, and the Listview just doesn’t show up. Obs: no error occurs.

I wonder what I’m doing wrong and how do I get the list to be displayed below my Container.

Follow my code below.

    class _RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  Widget _builderRow(WordPair pair){
    return Container(
      height: 120.0, // in logical pixels
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      // Row is a horizontal, linear layout.
      child: Row(
        // <Widget> is the type of items in the list.
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.directions_car_outlined),
            tooltip: 'Icon truck',
            onPressed: null, // null disables the button
          ),
          // Expanded expands its child to fill the available space.
          Column(
            children: [
              Container(
                height: 50.0,
                width: 120.0,
                child: Align(
                    alignment: Alignment.bottomLeft,
                    child: Text('Placa'),
                ),
              ),
              Container(
                height: 60.0,
                width: 120.0,
                child: Align(
                    alignment: Alignment.topLeft,
                    child: Text(pair.asString, style: TextStyle(fontSize: 21.0, fontWeight: FontWeight.bold)),
                ),
              ),
            ],
          ),
          Expanded(
            child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.all(10),
                  child: Column(
                    children: <Widget>[
                      Text('Mapa', style: TextStyle(color: Colors.grey.shade600)),
                      Text("321789456", style: TextStyle(fontSize: 21.0, fontWeight: FontWeight.bold)),
                    ]
                  )
                ),
                Text('Origem', style: TextStyle(color: Colors.grey.shade600)),
                Text("Pátio", style: TextStyle(fontSize: 21.0, fontWeight: FontWeight.bold))
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSuggestions() {
    return ListView.builder(
        padding: EdgeInsets.all(16.0),
        itemBuilder: /*1*/ (context, i) {
          if (i.isOdd)
            return Divider();
          /*2*/
          final index = i ~/ 2; /*3*/
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10)); /*4*/
          }
          return _builderRow(_suggestions[index]);
        });
  }

  Widget _returnRoute() {
    return Container(
      height: 30,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Text("Carregamento", style: TextStyle(fontSize: 19.0)),
          Text("Retorno de Rota", style: TextStyle(fontSize: 19.0)),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          tooltip: 'Back',
          onPressed: null,
        ),
        title: Text('Manobrista'),
        actions: [Icon(Icons.search)],
      ),
      body: ListView(
        padding: EdgeInsets.all(2.0),
            children: <Widget> [
              _returnRoute(),
              _buildSuggestions()
            ]
      )
    );
  }

Answer 1

This is because your widgets are ordered as follows:

-ListView externa
- -> Alguns Texts
- -> ListView _buildSuggestions()

Listview is a widget that allows scroll of its content. Since it has this intention, its content is not enough to define its size.

Therefore, when you use two nested Listview’s, it is undetermined for Flutter what size each should have: The outermost Listview allows infinite size (to calculate and allow the scroll as needed)while the internal cannot calculate the size given to it to dispose its contents.

Try, at Listview more internal, use the property Shrinkwrap as true:

Whether the extent of the scroll view in the scrollDirection should be determined by the Contents being viewed.

If the scroll view does not Shrink wrap, then the scroll view will expand to the Maximum allowed size in the scrollDirection. If the scroll view has unbounded constraints in the scrollDirection, then shrinkWrap must be true.

That is, translating, with this true property the size of this Listview will be provided by the content to be viewed. If this scroll has unlimited height or width, this property should be marked as true. This way the inner Listview will know its ante-hand size.

Applying in your case:

[...]
Widget _buildSuggestions() {
    return ListView.builder(
        shrinkWrap: true,
        padding: EdgeInsets.all(16.0),
        itemBuilder: /*1*/ (context, i) {
          if (i.isOdd)
            return Divider();
          /*2*/
          final index = i ~/ 2; /*3*/
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10)); /*4*/
          }
          return _builderRow(_suggestions[index]);
        });
  }
[...]