Flutter Wrap Widget

Moving crowded widgets to the next line

If you haven’t already seen the Widget of the Week video about Wrap, go ahead and watch that first.

In this article I’ll be filling out the code and examples that you saw in the video. Go ahead play with the code yourself to see how it works.

The basics

Normally when you want to layout multiple widgets horizontally or vertically you can use a row or column.

Row(
  children: [
    MyWidget(),
    MyWidget(),
    MyWidget(),
    MyWidget(),
  ],
),

But if there is not enough room the content gets clipped and you get the yellow and black overflow warning.

Row(
  children: [
    MyWidget(),
    MyWidget(),
    MyWidget(),
    MyWidget(),
    MyWidget(),
  ],
),