I am trying to wrap several outline buttons on a Container or Card. I want the buttons to wrap round the container or card widgets.
The challenge is that we don’t know exactly how many of these outline buttons will fine a line hence we need the container to wrap the buttons.
The UI should look like this.
2
Answers
Basically, the
Wrap
widget is what you are looking for!Example:
button
widget:The example contains a hard-coded
OutlinedButton
s, feel free to add the proper widgets (such asChoiceChip
or standardChip
).The Wrap dynamically takes care of moving (wrapping) its children to the next line. Note that the outer Container height is dynamic based on its child (Wrap) height.
Output:
You can use the widget below.
The Wrap widget ensures that the buttons automatically move to the next line when they don’t fit horizontally.