Flutter row overflfow with list

Question

I have a list I'm mapping:

List<Widget> names = post.names
          .map(
            (c) => new Padding(
                  padding: EdgeInsets.all(8),
                  child: new Text('' + c['name']),
                ),
          )
          .toList();

And displaying:

new Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: names,
          ),

However, the row overflows to right if it has too many items in it. I tried to wrap it to Expanded / Flexible widgets, but that causes error about the parent widget not having height.

If I try to use:

crossAxisAlignment: CrossAxisAlignment.stretch,

I get:

BoxConstraints forces an infinite height.

I also tried to use Expanded inside the Row, however that is not possible as I'm creating the children from the list and that causes error.

How to achieve a name list which also expands vertically based to amount of items?

Thanks! Wrap did the trick. Didn't even know that Widget existed. Drop it as an answer and I'm more than happy to accept it as solution. — EmJeiEn, May 08 '19 at 18:16

score 1 · Answer 1 · answered May 08 '19 at 01:58

1

If you want the widgets to be scrollable horizontally, use a list view and set the axis to horizontal.

But if you want the widgets to wrap, then you need to build a grid instead of a row.

Check out this post: Flutter - Layout a Grid

answered May 08 '19 at 01:58

Hassan Saleh

964
7
12

1

Wrap was the way to go, thaanks to @CopsOnRoad got it to work by simply swapping Row to Wrap. Thanks for the reply anyways! – EmJeiEn May 08 '19 at 18:17

score 1 · Accepted Answer · answered May 08 '19 at 18:19

1

You need to use Wrap instead of Row like this.

Wrap(
  children: names,
  //...
),

answered May 08 '19 at 18:19

CopsOnRoad

237,138
77
654
440

Flutter row overflfow with list

2 Answers2