Flutter Widget Guide — Wrap Widget in 5 mins or less.
This is Part 3 in the series where I’ll cover all the Flutter widgets that are in this YouTube playlist. I have created my own widget guide which I believe will help people who are new in this space. Please have a look at this GitHub project to explore all the amazing widgets.
Click here to ⏬ the App available on Google Play Store. 📱
My main motive behind this series is to keep things to the point. Your time is precious, let’s not waste it and get started.
Designing a basic layout in flutter is very easy thanks to the two most common widgets used — Row and Column. These widgets are great to lay out multiple widgets on screen any way you want, but sometimes you might face an issue where there is a block of yellow and black strips on your screen with an error like “Right overflowed by 471 pixels”. This happens when you ask a Row widget to adjust a child that is a bit too wide and goes beyond the space that the row has available.
To get rid of this problem of overflowing layout, flutter has an interesting solution.
Wrap Widget
1 | What?
The wrap widget is similar to Row or a Column widget with an added advantage that it can adjust its children according to the space available to it on the Screen. The default arrangement is horizontal (like a row) but you can make it vertical (like a column) as well by changing its direction property. You can adjust the space in between the adjacent children and the space between the lines as per your need.
2 | Wondering how it works?
Have a look at the Code snippet below.
3 | Explanation
In the example above, focus on the difference between the Row and the Wrap widget. See how the Wrap widget handles the layout overflow situation and wraps itself to the next line. In this example, our Wrap widget is behaving like a Row because the direction property is set to Axis.horizontal by default. Change spacing property to vary the gap between the children (Chip) widgets. Change runSpacing property to vary the gap between the lines.
Example layout - This widget is very handy when you want to create a layout in which you want your user to choose categories or their interests to customize the type of content they get to see in your app.
Previous 👆
Up next 👇
How many claps does this article deserve?
If you find this article useful, please click the 👏 button and share to help others find it! Feel free to clap many times (10💥, 20💥 or maybe 50💥 ?) It fuels my focus to write more of it.
Connect with me on LinkedIn or say hi on Twitter, mentioning this article. You can drop a mail at annsh29@gmail.com as well.
See more in the series:
Have a wonderful day 🙂
