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

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.