Flutter Widget Guide — Expanded Widget in 5 mins or less.

This is Part 2 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.

In flutter, you can have a screen with layout composed only of rows (horizontal arrangement) and columns (vertical arrangement). These widgets are great to arrange widgets on the screen in a systematic manner. Now, there are different ways in which a row or a column might decide to distribute the available space between their children — like arrange them all together to the left or equally distribute available space in between them.

In doing all of this, there might be a case where the screen is large enough to leave some extra space in between the children of a row or a column.

To fill up that extra space, flutter has an interesting solution.

Expanded Widget

1 | What?

Wrap a child of row or a column with this widget to make it, well, expandable. The child wrapped with this widget will automatically take up the extra space. The reason for this is that flutter arranges the inflexible widgets first and then lay out the Flexible widgets to take up the extra space.

If you have two or more flexible widgets, then you can prioritize one of them by setting the flex factor. The available space will be distributed among the children depending on the flex value. The higher the flex value the more space a widget takes.

2 | Wondering how it works?

Have a look at the Code snippet below.

Below is the visual representation of the code above.

3 | Explanation

In the above code, we have a Row widget with 3 Flexible children. All of them have a flex value that can be increased by clicking on them. The flex value is shown on the widget.

Here, you’ll observe how the layout changes its dimensions based on the flex value of a widget. The children are distributed on the basis of the ratio of the flex values. Let’s take an example to understand what I mean by this. Suppose the flex values of child1 = 1, chlid2 = 2 and child3 = 1. The ratio here is 1:2:1. So, the 1st and the 3rd child will occupy equal space and the rest of the space is occupied by the 2nd child.

Let’s take another example. Suppose the flex values of child1 = 24, chlid2 = 48 and child3 = 48. The ratio here is 1:2:2. So, in this case, 2nd and 3rd child will take equal space and the remaining is occupied by the 1st child.

Flutter Widget Guide — SafeArea Widget in 5 mins or less.

Previous 👆

Up next 👇

Flutter Widget Guide — Wrap Widget in 5 mins or less.

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:

Flutter Widget Guide — Index

Have a wonderful day 🙂

Flutter Community (@FlutterComm) | Twitter