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 FrameLayout in Flutter.

Series

Prerequisites

This blog already assumes that you have setup the flutter in your machine and able to run a Hello World app. If you haven’t 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

FrameLayout is one of the layouts which used very often while developing Android Designs. We define FrameLayout adding single or multiple child views which are drawn in a stack, with the most recently added child on top. Below its show how we do it in Android.

FrameLayout is used for mostly two cases in Android.

To draw a view on top of the other child view, i.e to overlaps views in a form of Stack with the most recently added child on top. It’s used as a container to draw Fragments .

The second reason is true for Android, but in case of flutter because Everything is a widget that’s why the concept of Fragment doesn’t apply in flutter instead we use widgets.

Now the first used case is very obvious for designing. So flutter provides an equivalent widget which behaves as FrameLayout . Yes, I know its Stack widget because I made the word bold-italic in the first use case.

Stack

Stack positions its children relative to the edges of its box. This class is equivalent to FrameLayout and its more useful when you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom.

This is how we define Stack in the flutter.

Here is the output for the above code.

Screenshot-1

As we know in FrameLayout the child views are drawn in form of the stack which is one on the top of the other depending upon the order they have defined. The first child will be at the bottom and the last define child will be on the top.

The same concept goes to the Stack widget. The child widget defined first in children:<Widget>[] will be on the bottom and the last item in children:<Widget>[] will be drawn on top.

1. android:gravity

This is defined in the parent layout since FrameLayout does not have android:gravity attribute, you need to assigned layout_gravity to each child in order to achieve android:gravity behavior.

But the Stack went one step ahead and provide android:gravity behavior in-build which can be achieve using Stack.alignment property which takes AlignmentDirectional object which has a predefined enum like AlignmentDirectional.topStart , AlignmentDirectional.center etc.

Since android:gravity is defined in parent layout we will define Stack.alignment in the parent as well which is our Stack widget. This is how you define in the above example.

child: new Stack(

alignment: AlignmentDirectional.center,

children: [

...//all your child widgets

],

)

By default it takes AlignmentDirectional.topStart if you don’t assign any value to alignment property. You can refer Screenshot-1 where we didn’t define any alignment value which by default aligned it to top start corner.

The beauty about flutter is there naming conventions you can make out what does it mean. From the alignment property enum name you can identify what it is going to do. AlignmentDirectional.topStart is going to set the children widgets of the top corner of the Stack widget and so on. This is how it looks with other AlignmentDirectional values.

Top gravity

Center gravity

Bottom gravity

Note :