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.
