Flutter Widget of the day : Wrap


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

Flutter Row with unfitted elements

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

Replace Row with Wrap

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.