Flutter: Can't add ListView to example app

Question

I'm having a hard time Googling my way out of this. I've created the default Flutter app that comes with the basic tutorial, and now I would like to add a ListView to it, like so:

  body: Center(
    // Center is a layout widget. It takes a single child and positions it
    // in the middle of the parent.
    child: Column(
      // Column is also a layout widget. It takes a list of children and
      // arranges them vertically. By default, it sizes itself to fit its
      // children horizontally, and tries to be as tall as its parent.
      //
      // Invoke "debug painting" (press "p" in the console, choose the
      // "Toggle Debug Paint" action from the Flutter Inspector in Android
      // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
      // to see the wireframe for each widget.
      //
      // Column has various properties to control how it sizes itself and
      // how it positions its children. Here we use mainAxisAlignment to
      // center the children vertically; the main axis here is the vertical
      // axis because Columns are vertical (the cross axis would be
      // horizontal).
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Text(
          'You have pushed the button this many times:',
        ),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.display1,
        ),
        ListView(
          padding: const EdgeInsets.all(8),
          children: <Widget>[
            Container(
              width: 50, // This changes nothing. 
              height: 50, // This changes nothing.
              child: const Center(child: Text('Text entry'))
            )
          ]
        ),
      ],
    ),
  ),

The only thing I've added, is the ListView widget.

The error that I receive is this:

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderRepaintBoundary#d4bf6 relayoutBoundary=up3 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1687 pos 12: 'hasSize'
The relevant error-causing widget was: 
  Column file:///Users/user/code/project/lib/main.dart:77:16
════════════════════════════════════════════════════════════════════════════════════════════════════

Now, I've concluded that this has something to do with how the ListView is packed into its parent container, maybe that the rendering engine doesn't know how to handle the size of the list view, but I haven't been able to find information on how to actually fix it.

score 1 · Answer 1 · edited Apr 26 '20 at 08:49

1

listView has shrinkWrap attribute can you try:

ListView(
  shrinkWrap: true,
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      width: 50, // This changes nothing.
      height: 50, // This changes nothing.
      child: const Center(child: Text('Text entry'))
    )
  ]
)

edited Apr 26 '20 at 08:49

Teekin

12,581
15
55
67

answered Apr 26 '20 at 08:39

Çağrı BIYIK

56
9

Yes, exactly what I needed and straight to the point! Thanks! :) I had to accept a different answer though, as it was more thorough and still also to the point. Sorry about that, but welcome to StackOverflow! – Teekin Apr 26 '20 at 08:47

score 1 · Answer 2 · answered Apr 26 '20 at 08:41

1

I think the problem comes from the fact that you place a ListView inside a Column. Hence you must provide a size to your ListView. the answer to this question provides a good code example to solve your issue.

The actual reason for this error is that both Column and ListView try to expands in vertical axis. hence you need to constrain the height of ListView.

answered Apr 26 '20 at 08:41

Uj Corb

1,959
4
29
56

Thanks for the interesting info on the theory behind it. It may prove useful as I advance, but the specific problem was solved by Çağrı BIYIK below. Still upvoting. :) – Teekin Apr 26 '20 at 08:49

score 1 · Accepted Answer · edited Apr 26 '20 at 08:56

this is because the ListView by default wants to expand itself to fill available space. and cause you to wrap it with column it can't expand itself. you have two options here:

First is Wrap your Listview with Expanded widget. Expanded will take all the remaining available space for its child. for this option use below code:

Expanded(
  child: ListView(
    padding: const EdgeInsets.all(8),
    children: <Widget>[
      Container(
        width: 50, // This changes nothing.
        height: 50, // This changes nothing.
        child: const Center(child: Text('Text entry'))
      )
    ]
  ),
),

the second option is to set shrinkWrap property of ListView to true. by doing this ListView don't expand itself:

ListView(
  shrinkWrap: true,
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      width: 50, // This changes nothing.
      height: 50, // This changes nothing.
      child: const Center(child: Text('Text entry'))
    )
  ]
)

Great answer, thank you! Especially good to know both ways, since I haven't really decided if and how to display things below the list, so I may very well go for option 1 although option 2 is currently what I'm doing. — Teekin, Apr 26 '20 at 08:57

Flutter: Can't add ListView to example app

3 Answers3