How to Fix Overflow in Row and Column using Wrap Widget

Wrap Widget in flutter

Rows and columns are great for laying out widgets. But sometimes you run out of room.

One of the widgets that can help is Wrap. Wrap lays out its children, one at a time, a lot like a row or column. But when it runs out of space, it just wraps to the next line.


You can also use its direction property to tell it whether to run vertically or horizontally. And also there's alignment and spacing properties as well.

Wrap widget works really well with things like dialog buttons and chips.

Now let's take an example how Wrap Widget works.








You can see above, screen gets overflowed. Now instead of using Row Widget, use Wrap Widget.

    return Center(
child: Container(
width: 300,
//height: 300,
color: Colors.blue,
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
child:
Wrap(
children: [
MyWidget(),
MyWidget(),
MyWidget(),
MyWidget(),
MyWidget(),
],
),

),
);

Using Wrap Widget is quite interesting. To make it more interesting you can use properties like direction, alignment, etc.

To know about next interesting widget, i.e., AnimatedContainer.

Previous
Next Post »