Wrap in Flutter

147

In flutter, wrap widget align its children vertically or horizontally. Usually, we use row and column widget to arrange the children but sometime we may be unable to fit the children in row and column and it will give overflow error message. Therefore to overcome this error we use wrap widget.

In this tutorial, we will discuss about wrap widget in flutter. Here, we will learn with example.

Constructors of Wrap

(new) Wrap Wrap({
  Key? key,
  Axis direction = Axis.horizontal,
  WrapAlignment alignment = WrapAlignment.start,
  double spacing = 0.0,
  WrapAlignment runAlignment = WrapAlignment.start,
  double runSpacing = 0.0,
  WrapCrossAlignment crossAxisAlignment = WrapCrossAlignment.start,
  TextDirection? textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  Clip clipBehavior = Clip.none,
  List<Widget> children = const <Widget>[],
})

Code Implementation

Here, we discuss the example using the row widget and see the error created by it.

body: Row(
        children: [
          Container(
            height: 150.0,
            width: 150.0,
            color: Colors.red,
          ),
          Container(
            height: 150.0,
            width: 150.0,
            color: Colors.yellow,
          ),
          Container(
            height: 150.0,
            width: 150.0,
            color: Colors.pink,
          ),
          Container(
            height: 150.0,
            width: 150.0,
            color: Colors.green,
          ),
          Container(
            height: 150.0,
            width: 150.0,
            color: Colors.brown,
          ),
          Container(
            height: 150.0,
            width: 150.0,
            color: Colors.amber,
          ),
        ],
      ),

      

Output

Here, we can see the error RIGHT OVERFLOW BY 400 PIXELS. Now we replace the row widget with wrap widget and lets see the change in output.

body: SizedBox(
        width: double.infinity,
        child: Wrap(
          spacing: 10.0,
          runSpacing: 20.0,
          alignment: WrapAlignment.start,
          children: [
            Container(
              height: 150.0,
              width: 150.0,
              color: Colors.red,
            ),
            Container(
              height: 150.0,
              width: 150.0,
              color: Colors.yellow,
            ),
            Container(
              height: 150.0,
              width: 150.0,
              color: Colors.pink,
            ),
            Container(
              height: 150.0,
              width: 150.0,
              color: Colors.green,
            ),
            Container(
              height: 150.0,
              width: 150.0,
              color: Colors.brown,
            ),
            Container(
              height: 150.0,
              width: 150.0,
              color: Colors.amber,
            ),
          ],
        ),
      ),
   

alignment: WrapAlignment.center,

alignment: WrapAlignment.end,

alignment: WrapAlignment.spaceAround,

alignment: WrapAlignment.spaceBetween,

alignment: WrapAlignment.spaceEvenly,

Here is the github link of this project:

https://github.com/NilamPathak578/flutterHopeProjects/tree/wrap

Thank you for reading this article. If you have any queries regarding any topic, feel free to share with us. We will try to solve your problems.

Happy Learning.

Follow me here:

Leave A Reply

Your email address will not be published.