Menu
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')) ] 
267
Approach 2 Using \n here is an example with Dynamic String : var readLines = ['Test1', 'Test2', 'Test3']; String getNewLineString() { StringBuffer sb = new StringBuffer(); for (String line in readLines) { sb. write(line + "\n"); } return sb.
A Wrap lays out each child and attempts to place the child adjacent to the previous child in the main axis, given by direction, leaving spacing space in between. If there is not enough space to fit the child, Wrap creates a new run adjacent to the existing children in the cross axis.
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, 
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
