Flutter For Android Developers : How to design LinearLayout in Flutter.
Note: I’ve moved this blog to my website. I’ll be writing primarily on my new blog, not here. If you want to stay updated on my recent blogs then please subscribe to my new blog. Thanks
This blog is meant for Android developers looking to apply their existing Android knowledge to build mobile apps with Flutter. In this blog, we are going to explore what is equivalent design widget for LinearLayout in Flutter.
Series
- How to design Activity UI in Flutter.
- How to design LinearLayout in Flutter. (You are here)
- How to design FrameLayout in Flutter.
Prerequisites
This blog already assumes that you have already setup the flutter in your PC and able to run a Hello World app. If you have not install flutter yet, gets started from here.
Dart is based on the object-oriented concept so as android java developer you will be able to catch up dart very easily.
Let’s get started
If you are an Android Developer then I assumes that you have heavily used LinearLayout while designing the layout. Those who are still not familiar with LinearLayout let me start with an official definition.
LinearLayout is a layout that arranges other views either horizontally in a single Column or vertically in a single Row.
As above visual representation and the definition itself, you can make out what is the equivalent widget in Flutter. Yes, you are right they are Row and Column. This two widget have almost same behavior as the LinearLayout in native Android. Row and columns are heavily used in flutter too.
Note: The Row/Column widget does not scroll . If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a ListView.
Now we will cover some main attributes of LinearLayout which can be converted into the equivalent widget properties in Flutter.
1. Orientation
In LinearLayout you can define the orientation of its child by using android:orientation=”horizontal” attributes which take horizontal/vertical as values which are similar to Row/Column widget in Flutter.
In Android, LinearLayout is ViewGroup which can have views as a child.You can set all the child views inside the <LinearLayout> </LinearLayout> tags.So in order set child widget in our Row/Column widget, we need to use Row/Column.children property which accepts the List<Widget>. Refer below code snippet.
In this example, we have used Row widget which is android:orientation=”horizontal” attribute of LinearLayout. We use Column for vertical value. If you are wondering what is Scaffold doing here than you can read my previous article How to design activity UI using Scaffold in Flutter ?. Below is the output from above code for using Row and Column widget.
2. “match_parent” vs “wrap_content”
- MATCH_PARENT: which means that the view wants to be as big as its parent and if your view is top level root view than it will as big as the device screen.
- WRAP_CONTENT: which means that the view wants to be just big enough to enclose its content.
In order to get behavior for match_parent and wrap_content we need to use mainAxisSize property in Row/Column widget, the mainAxisSize property takes MainAxisSize enum having two values which is MainAxisSize.min which behaves as wrap_content and MainAxisSize.max which behaves as match_parent.
In the above example, we did not define any mainAxisSize property to the Row widget so by default its set mainAxisSize property to MainAxisSize.max which is match_parent. The yellow background of the container represents how the free space is covered. This is how we define this property in the above example and check the output with different attribute values.
....body: new Container(
color: Colors.yellowAccent,
child: new Row(
mainAxisSize: MainAxisSize.min,
children: [...],
),
)...
This is how we can visually differentiate the attributes we used in Row/Column widget.
3. Gravity
Gravity specifies how a child views should position its content, within its own bounds. We define gravity in LinearLayout layout using android:gravity=”center” with multiple alignment values. The same can be achieved in Row/Column widget using MainAxisAlignment and CrossAxisAlignment properties.
1. MainAxisAlignment:
This property defines how the children should be placed along the main axis(Row/Column).In order to make this work, there should be some space available in the Row/Column widget if you set the value to MainAxisSize.min i.e wrap_content than setting MainAxisAlignment won’t have any effect on the widget because of no available space. We can define MainAxisAlignment property like this.
....body: new Container(
color: Colors.yellowAccent,
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [...],
),
)...
A picture is worth a thousand words, instead describing each and every attribute I rather prefer visual representation.
So below this output comparing LinearLayout attributes to MainAxisAlignment property in Row Widget.
Now, let’s compare it with the Column Widget.
Exercise: You can try other enums
spaceEvenly,spaceAround,spaceBetweenwhich behaves as a vertical/horizontal chain which we use in ConstraintLayout.
2. CrossAxisAlignment :
This property defines how the children should be placed along the cross axis. It means if we use Row widget the individual’s children gravity will be on the basis of the vertical line. And if we use Column widget the individual’s children gravity will be on the basis of horizontal line.
This sound pretty confusion right! Don’t worry you will understand better as you read further.
For better understanding, we are making it wrap_content i.e MainAxisSize.min. You define a CrossAxisAlignment property like below code. If no property is set then it will take CrossAxisAlignment. start by default.
....body: new Container(
color: Colors.yellowAccent,
child: new Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [...],
),
)...
So below this output comparing LinearLayout attributes to CrossAxisAlignment property in Row Widget.
Now, let’s compare it with the Column Widget.
Stretch behave little different, its stretch the widget to max available space i.e match_parent to its cross axis.
3. Layout Weight
To create a linear layout in which each child uses the same amount of space or to divide space in specific ratio on the screen,we set the android:layout_height of each view to “0dp” (for a vertical layout) or the android:layout_width of each view to “0dp” (for a horizontal layout). Then set the android:layout_weight of each view to “1” or any other value as per space you want to divide.
To achieve the same thing in flutter Row/Column widget we wrap each child into an Expanded widget which will have flex property equivalent to our android:layout_weight so by defining flex value we define the amount of space should be applied to that specific child.
This is how you define the weight/flex to each child.
For the sake of better understanding, we have wrap each icon inside a container with a background color to easily identify how much space has been covered by the widget.
Conclusion
LinearLayout is heavily used in Android same goes with flutter Row/Column widget. Hope to cover more topics in the upcoming blogs. I have created a sample app to play around with Row/Column attributes and how this attributes works when they are combined.
Check out flutter for android example here.
Thank you !!!
If you interested in more tips and tricks like this in Flutter, than You can subscribe to my newsletter called Widget Tricks. In this newsletter, we will share the latest tips, tricks, and techniques to help you build beautiful and maintainable mobile apps with Flutter.
If you find this article helpful. Please like,share and clap so other people will see this here on Medium. If you have any quires or suggestions, feel free comment on the blog or hit me on Twitter, Github or Reddit.
To get latest updates for my upcoming blog please follow me on Medium, Twitter, Github or Reddit.
