Welcome to another Flutter Widget of the Day post. Today we have Wrap widget. Look at the following screen shot

Behind the scene
body: Center( child: Row( children: <Widget>[ FlatButton(child: Text('Butto1'),), FlatButton(child: Text('Butto2'),), FlatButton(child: Text('Butto3'),), FlatButton(child: Text('Butto4'),), FlatButton(child: Text('Butto5'),), FlatButton(child: Text('Butto6'),), ], ), ),
As we know for arranging controls in horizontal manner we use Row widget and for vertical use Column widget.
The screen bump with a Yellow bar, which is caused by controls that is not fitted on the screen. Flutter has beautiful way of showing Errors, lol.
To solve the issue like this, Flutter has a special Widget called Wrap which wrap the contents to next line as we saw on the following screenshot

and the code will be as follows
body: Center( child: Wrap(spacing: 3, children: <Widget>[ FlatButton(child: Text('Butto1'),), FlatButton(child: Text('Butto2'),), FlatButton(child: Text('Butto3'),), FlatButton(child: Text('Butto4'),), FlatButton(child: Text('Butto5'),), FlatButton(child: Text('Butto6'),), ], ), ),
Wrap has property children as Rows has ,so we can lay the controls as in Rows. It has many other property such as spacing which is handy . And the following quick video will help you further.