Introduction :
Wrap class is a widget that is used to display its children or widget in a multiple horizontal or vertical direction. Wrap class is basically used to wrap our children in a direction as provided which looks similar to somewhat Rows and Columns.
Table of content :
:: Properties used in a Wrap class
Wrap class :
Wrap class is used to align or adjust multiple widgets vertically or horizontally similar to Rows and Columns. It can be adjusted either in form of Row or Column as required. Wrap class automatically align or fit the widgets accordingly in its cross-axis area without displaying an Overflow message similar to Rows and Columns.
Properties :
alignment: this property is used to describe how the children should align in the main axis. Its default value is WrapAlignment.start.
clipBehavior: This property takes in Clip enum as the object and decides whether the content should be clipped or not according to the option.
crossAxisAlignment: this property is used to describe how the children should be aligned relative to each other in the cross-section part. Its default value is WrapCrossAlignment.start .
direction: This property uses a direction as the main axis. By default axis is horizontal and we can change it to vertical by using Axis.verical its value.
runAlignment: this property describes how the run should be placed in the cross axis. Its default value is WrapAlignment.start.
spacing: this property is used to place a space between children in the main axis.
runSpacing: this property is used to place a space between the children along a cross axis.
textDirection: this property is used to arrange the children inside Wrap class in the given direction.
verticalDirection: this property is used to determine the order to lay children out vertically and how to interpret start and end in the vertical direction.
Sample :
This is how this sample looks :
But if we have used Row instead of this Wrap class then the widget may have Overflowed by pixels as shown below…👀
To fix such issues we uses Wrap class instead of using Rows and Columns.
Implementation:
As shown above we can also apply other properties also…👍
For more info visit down the link:
Wrap class
A widget that displays its children in multiple horizontal or vertical runs. A Wrap lays out each child and attempts to…api.flutter.dev
Thanks for reading this article ❤
Clap 👏 If this article helps you.
Feel free to post any queries or corrections you think are required…✔
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
