user6150316
user6150316

Reputation: 31

ListView does not work as a child of Column or Row

I`m new in flutter framework and I want to use CustomLists. My (body:) I wants to add a listviewBuilder into a Column but I give an empty page. if I use only listView in body part every things is fine.

Here is my Widget:

Widget _buildListView() {
    return ListView.builder(itemBuilder: (BuildContext context, int index) {
      return Dismissible(
        key: Key('ke'),
        onDismissed: (DismissDirection direction) {
          if (direction == DismissDirection.endToStart) {
            print('Swiped end to start');
          } else if (direction == DismissDirection.startToEnd) {
            print('Swiped start to end');
          } else {
            print('Other swiping');
          }
        },
        background: Container(
          color: Colors.red,
        ),
        child: Container(
            child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: Column(children: <Widget>[
                    Row(
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.symmetric(
                              horizontal: 8.0, vertical: 2.0),
                          padding: EdgeInsets.all(4.0),
                          color: Colors.red,
                          child: Text('12'),
                        ),
                        SizedBox(
                          width: 8.0,
                        ),
                        Text('135'),
                      ],
                    )
                  ]),
                ),
                Expanded(
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Container(
                              color: Colors.green,
                              width: 15,
                              height: 10,
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            Text('120'),
                            SizedBox(
                              width: 5,
                            ),
                            Container(
                              color: Colors.yellow,
                              width: 15,
                              height: 10,
                            ),
                          ],
                        )
                      ]),
                ),
                Expanded(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                      Text('30'),
                    ])),
              ],
            ),
            Divider()
          ],
        )),
      );
    },itemCount: 10,);
  }

I get this errors:

The following assertion was thrown during performResize():

I/flutter (14466): Vertical viewport was given unbounded height.

I/flutter (14466): Viewports expand in the scrolling direction to fill their container.In this case, a vertical

I/flutter (14466): viewport was given an unlimited amount of vertical space in which to expand. This situation

I/flutter (14466): typically happens when a scrollable widget is nested inside another scrollable widget.

I/flutter (14466): If this widget is always nested in a scrollable widget there is no need to use a viewport because

I/flutter (14466): there will always be enough vertical space for the children. In this case, consider using a Column

I/flutter (14466): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size

I/flutter (14466): the height of the viewport to the sum of the heights of its children. 

Upvotes: 0

Views: 1160

Answers (2)

Mahdi Tohidloo
Mahdi Tohidloo

Reputation: 3398

you have to wrap your ListView in a container that has the specified width and height values.

for example, wrap the ListView in the Container with height and with values or wrap it to an Expanded widget to fill the entire space its parent.

Container(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    child: ListView.builder() // your list view builder widget
)

or

Expanded(
   child: ListView.builder() // your list view builder widget
)

note that you should use the Expanded widget inside a flex widget that has specified the width and height values. like Column, Row , ...

Also, you should set the shrinkWrap value to true when using ListView inside another ListView widget.

Upvotes: 0

HasilT
HasilT

Reputation: 2609

add shrinkWrap property true for listview.

ListView.builder(
shrinkWrap:true,
itemBuilder: (BuildContext context, int index) {
 return Container();
});

Upvotes: 2

Related Questions