Display Chips and Text in multiple rows with flutter

Question

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?

Solution

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.

Comments

[Rémi Rousselet]

Such complex text layout is not available yet. Only rectangle boxes are available.

[Codered]

WidgetSpan did the trick for me. See this post.