Autowrap widgets to new line in flutter
I have 5 widgets with different sizes which would overflow if placed next to each other.
I am looking for a layout helper class that limits the widgets to the horizontal space and auto-wraps the widgets instead to a new line. First I was looking for a grid view but prefer instead a view which is independent since all elements have different widths. A multi line text field does actually already that, I just need the same approach with my widgets. Any ideas?
<Widget>[
new RaisedButton(child: const Text('Foo')),
new RaisedButton(child: const Text('Foo Bar')),
new RaisedButton(child: const Text('Foo Bar Bas')),
new RaisedButton(child: const Text('F')),
new RaisedButton(child: const Text('B'))
]
The Wrap
widget is what you need:
return Wrap(
children: <Widget>[
new RaisedButton(child: const Text('Foo')),
new RaisedButton(child: const Text('Foo Bar')),
new RaisedButton(child: const Text('Foo Bar Bas')),
new RaisedButton(child: const Text('F')),
new RaisedButton(child: const Text('B'))
],
);
Also you can add the properties runSpacing
and spacing
to your Wrap
widget to give more space between your items in horizontal and vertical.
Wrap(
runSpacing: 5.0,
spacing: 5.0,