CODEWITHSUNDEEP
flutterflutter-layout
aksn
aksn

Reputation: 2559

Display Chips and Text in multiple rows with flutter

I am trying to display chips and long lines of text wrapped in multiple lines inside of a row.

This is wrong

I want it like this, except for the label and the aligned on the same line.

My current code:

        return new Column(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            new Wrap(
              spacing: 8.0,
              runSpacing: 4.0,
              direction: Axis.horizontal,
              children: <Widget>[
                new Tag(tagLabel: 'Chip1'),
                new Text('This is a very, very long text that should wrap. The second line should be shown below the first chip!'),
                new Chip(label: new Text('Chip2')),
                new Chip(label: new Text('Chip3')),
                new Chip(label: new Text('Chip4')),
                new Chip(label: new Text('Chip5')),
                new Chip(label: new Text('Chip6'))
              ],
            )
          ],
        );

Any idea?

Upvotes: 4

Views: 4525

Answers (1)

Luiz Palte
Luiz Palte

Reputation: 133

You need to wrap Tag 1 and text 1 in a Row, and all in a Column. And some ajustment in chip size. For default it expand all line from screen.

Upvotes: 1

Related Questions