Document ListView usage with the Column widget

[elnurvl]

I use flutter framework with following revisions:

Flutter 0.4.4 • channel beta • https://github.com/flutter/flutter.git
Framework • revision f9bb4289e9 (4 weeks ago) • 2018-05-11 21:44:54 -0700
Engine • revision 06afdfe54e
Tools • Dart 2.0.0-dev.54.0.flutter-46ab040e58

I cannot use ListView or ListViewBuilder inside Column widget. No list item is shown until I remove Column wrapper. Is it supposed not to work in that way, or is it a bug?

Here it is my test widget.

new Container(
        child: new Column(
      children: <Widget>[
        new ListView.builder(
            itemCount: 3,
            padding: const EdgeInsets.only(top: 10.0),
            itemBuilder: (context, index) {
              return new Text(" asdasd");
            })
      ],
    ))

[xster]

The error message should explain why it wouldn't work conceptually. Could you elaborate on your expected outcome?

[elnurvl]

@xster There is no any error message. Just an empty view.

[zoechi]

Can you please provide a running example (main.dart) that allows to reproduce?

[JosephDunivan]

Im having this issue too.

[zoechi]

@JosephDunivan would you mind providing a minimal example, error output, expected behavior?

[JosephDunivan]

Hmm... where to start. Well ListView really wants to be put in an expanded widget right? The implementation would be to put a search bar above it and perhaps some buttons below it.

What I expected to be able to do

Column (
 children: <Widget>[
    new TextField(
    decoration: new InputDecoration(
    labelText: "Search something"
    ),
    ListView(),
  ]
)

Instead I think you need to use an expanded widget.

Column (
  children: <Widget>[
    new TextField(
    decoration: new InputDecoration(
    labelText: "Search something"
    ),
    Expanded(
      ListView(),
    ),
  ]
)

[JosephDunivan]

@elnurvl Can you see if wrapping your ListView in and Expanded with a parent of type flex(ie like a column widget) resolves your issue?

[zoechi]

Can you please make it a self-contained runnable example, so that we just can copy it into lib/main.dart of a new project created with flutter create foo and reproduce?

[JosephDunivan]

You could just place that code right after body:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
         return Scaffold(
          appBar: AppBar(
          title: Text("Title"),
          body: 
  );
}

[JosephDunivan]

ListView simply wants to be put in an Expandedwidget that has a parent of type flex. I don't necessarily think that's intuitive, but that's how it works.

[zoechi]

I/flutter ( 7377): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 7377): The following assertion was thrown during performResize():
I/flutter ( 7377): Vertical viewport was given unbounded height.
I/flutter ( 7377): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 7377): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 7377): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 7377): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 7377): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 7377): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 7377): the height of the viewport to the sum of the heights of its children.

It is not that ListView wants to be in an Expanded, it's that it needs to know the available height and inside a Column Expanded provides that. You can also use another widget that limits the height in some way, it doesn't have to be Expanded.

I think this is working as intended. Feel free to add a comment to have the issue reopened if you disagree.

[zoechi]

Uh, it was about improving docs. I'll leave it open then and let others decide how to proceed.

[JosephDunivan]

it's that it needs to know the available height and inside a Column

Placing a list view inside of a column widget or any widget that takes children is likely to be a common occurrence(list views with search bars above them for example). I think updating the docs for list view with an example of placing it inside a widget with a flex parameter such as Expanded would help, similarly to the basic example at Basic List. Maybe we can open a new issue to include an example of Searching a ListView in the Cookbook docs? Two bugs with one stone.

[zoechi]

Related to #9780

[DAMMAK]

I'm not sure if anybody has found a solution to this... I try to place listview as a child of Column Widget and it is throwing an error... any help on how to solve this or a workaround

[Abhishek01039]

I'm not sure if anybody has found a solution to this... I try to place listview as a child of Column Widget and it is throwing an error... any help on how to solve this or a workaround

Wrap listview in Expanded

[GhayoorUlHaq]

I'm not sure if anybody has found a solution to this... I try to place listview as a child of Column Widget and it is throwing an error... any help on how to solve this or a workaround

Wrap listview in Expanded

Thanks man this worked ✌️

[thechinkysight]

Hmm... where to start. Well ListView really wants to be put in an expanded widget right? The implementation would be to put a search bar above it and perhaps some buttons below it.

What I expected to be able to do

Column (
 children: <Widget>[
    new TextField(
    decoration: new InputDecoration(
    labelText: "Search something"
    ),
    ListView(),
  ]
)

Instead I think you need to use an expanded widget.

Column (
  children: <Widget>[
    new TextField(
    decoration: new InputDecoration(
    labelText: "Search something"
    ),
    Expanded(
      ListView(),
    ),
  ]
)

This worked for me. But I don't know how it worked. Can you please explain to me how it worked?

[abeni-ga]

must be provided height for the parent container

[the-thirteenth-fox]

I'm having this issue too.

[mishrhm]

I am having the same issue with ListView.builder inside a column .Tried wrapping with Expanded widget but it didnt helped the same error continues.

[thechinkysight]

As per this docs: https://flutter.dev/docs/development/ui/layout/box-constraints Column provides loose constraints to its child, but ListView provides tight constraints to its children meaning it will try to be as big as possible. So due for that reason, it won't leave any room for the search bar. So we needed to control the ListView's constraints via wrapping it inside Expanded. It's my assumption.

[dimitar-nikovski]

Expanded doesn't seem to work in my case, but I used

Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
        SearchBox(),
        Container(
            constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
            child: ListView(

I think the toplevel Column still has to have constrained ancestry though

[Sammy-iiitb]

For listview you need to provide height, same applies with if your list tiles are custom and inside a container it needs height:

new Container(
        child: new Column(
      children: <Widget>[
        new ListView.builder(
            height: 50, // give some value here and add this new line
            itemCount: 3,
            padding: const EdgeInsets.only(top: 10.0),
            itemBuilder: (context, index) {
              return new Text(" asdasd");
            })
      ],
    ))

[laghribi98]

      Column(
           children: <Widget>[
          Expanded(child: Text("Test")),
          Expanded(
            child: ListView.builder(
               itemCount: _newParking.length,
               itemBuilder: _buildItemsForListView,

            ),
          ),
        ],
      ),`

[MikeSWelch]

@Sammy-iiitb

height: 50,

ListView.builder doesn't accept a height parameter.

[gauravrajkagwaniya]

Please set container height when you are using the list view in column

[WiRight]

Also, you can try use CustomScrollView

CustomScrollView(
      controller: _scrollController,
      slivers: <Widget>[
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              final OrderModel order = _orders[index];

              return Container(
                margin: const EdgeInsets.symmetric(
                  vertical: 8,
                ),
                child: _buildOrderCard(order, size, context),
              );
            },
            childCount: _orders.length,
          ),
        ),
        SliverToBoxAdapter(
          child: _buildPreloader(context),
        ),
      ],
    );

Tip: _buildPreloader return CircularProgressIndicator or Text

In my case i want to show under ListView some widgets. Use Column does't work me, because widgets around ListView inside Column showing always "up" on the screen, like "position absolute"

Sorry for my bad english

[Abhishek01039]

@zoechi @Hixie what could be the possible solution for this issue?

[gauravrajkagwaniya]

Please set container height when you are using the list view in column

a proper height is needed when using the listview.builder "wrap it with container " inside column----> the list must be bounded because it will go infinite in column . In listview you don't have to write any height. that ll work like a charm, I hope that answer help you.

[marcelxsilva]

Expanded doesn't seem to work in my case, but I used

Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
        SearchBox(),
        Container(
            constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
            child: ListView(

I think the toplevel Column still has to have constrained ancestry though

Very good, this worked for me!!

[gauravrajkagwaniya]

You can also set the srinkwrap to true. Instead of setting a perticular height.

[exaby73]

Since https://api.flutter.dev/flutter/widgets/ListView-class.html does not contain any docs that explain this behavior of ListView, I'll update the labels