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 »

1 comments:

Click here for comments
12 September 2020 at 20:22 ×

[…] can hug their children tightly or spread them out and relax. Similarly, Wrap Widget use for Responsive Application. These widgets are made good looking […]

Congrats bro What is Flex Widget in Flutter | Expanded Widget - Flutter Fact you got PERTAMAX...! hehehehe...
Reply
avatar