How to Wrap the Widgets in Flutter?

Rishabh Bisht

1 August 2023

Hi, Today we are going to learn some simple ways to manage Flutter widgets with the help of Wrap Widget.

Introduction

The wrap widget is the same as the Row widget in Flutter as they both create the flow layout aligning their children in a horizontal manner.

The main difference between Row and Wrap is Row enforces a strict layout causing overflow issues while Wrap manages the space and displays the child on the next line.

Why use Wrap?

The main reason for using Wrap widget over Row Widget is that, unlike Row Widget Wrap doesn’t enforce any specific constraints. Unlike Row, the Wrap widget will automatically put the widget in the next line if it violates the constraints.

Normally When we want to add multiple widgets in a single line we use the row widget and it works just fine but the problem comes when there is not enough room for the widgets. This is the major issue with the Row Widget what’s more, it will just throw the overflow error for the extra widgets.

          Row(
            children: &#091;
              Widget(),
              Widget(),
              Widget(),
              Widget(),
            ],
          )

Row(

children: [

Widget(),

)

Now if we exceed the horizontal width limit we will start getting the errors like these:-

This is where the Flutter Wrap widget comes into action. Though the Implementation is the same as Row Widget but unlike Row Flutter Wrap Widget simply moves the remaining widgets to the next line when it exceeds the width constraints.

          Wrap(
            children: &#091;
              Widget(),
              Widget(),
              Widget(),
              Widget(),
              Widget(),
            ],
          )

Wrap(

children: [

Widget(),

)

If we execute the same line of code but with the wrap widget we will see a little change, as it will automatically move the widget to the next line if it exceeds the size constraints.

Properties

The Wrap widget comes with some amazing properties like:-

Direction: By default, direction for widget is horizontal but we can make it vertical by changing the axis from Axis.horizontal to Axis.vertical.

alignment: with this property, the alignment property is for aligning widgets.

spacing: With this, we can give space between the children.

runAlignment: runAlignment property shows how widgets should be placed on the cross-axis. By default, we have runAlignment as WrapAlignment.start.

runSpacing: With this property, we can equally provide the runSpacing between the runs. (ex: runSpacing:5.0).

crossAxisAlignment: We can align the children relative to each other in cross Axis.

textDirection: We can arrange children in a row using textDirection.

clipBehaviour: This property manages the clipBehaviour of children widgets.

children: It takes the list of Widgets that need to be displayed on the screen.

verticalDirection: This property takes in VerticalDirection enum as the object to. This property decides the order in which each child’s widget will be placed on the screen in a vertical sense.

runtimeType: It determines the type of the Wrap widget at the run time.

key: This property decides how one widget will replace another widget on the screen.

Conclusion

Now, We have finally learned how to manage the widget overflow with the help of the Wrap widget. You can also check out more amazing blogs on Flutter with Mobikul Bogs.

You may also check our interactive app designs by our Flutter app develop ment company

References:- Flutter Official Doc