Create Layout in Flutter

Layout is very important part for every app now days as we all know, If UI is not good sometimes it is drawback for app to loose users.

First thing we need to know in Flutter is when we are going to create layout in flutter we are using Widgets, we are using Widget for UI element creation or layout formation.

In flutter classes also based on Widgets and Element for layout and UI elements is also widgets.

In this article I am going to show or give brief of Widget How we can use that widget to create layout formation and UI Elements.

First we need to understand What is Widget in flutter?

Now i thought you all know what is Widget in flutter, Now we are going to start create layout in Flutter.

When we are create layout in flutter we need to use Widgets. In flutter we use Widgets everywhere for Text, Image and Icons all these are widgets that is seen to user in UI, but there is also some Widget that don’t see to user like Row, Column and Container these widget we are using for layout formation.

In above design i am using Container, Column and Row for maintain the layout and use RaisedButton and Icon Widget to visible to user in UI.

This is visual image for above layout we are going to create in our layout using Container, Column and Row for formation that is not visible to user and RaisedButton and Icon Widget for visible to user.

This image is showing how we create above layout using Container, Row and Column Widgets, using tree and set some property for give space around the icon in Row Widget and set center in screen to that layout like following:-

In this now i am going to show code i have done flutter using Container, Row, Column Widget.

In Container Widget we can set some properties like margin, padding, height, width, transform, color, decoration and more properties we can set.

Center Widget we are using to give widget center location in view.

In Row and Column Widget use array of Widget we can say that children like most of the widget has only one child but in Row and Column has multiple child so that Row and Column has children(array of widget). They have multiple properties like mainAxisAlignment, crossAxisAlignment, mainAxisSize like that we can use these property to set Widget alignment in UI.

In this article i gave to much theoretical information now going to show code.

Now you guys understand code part how we can create layout in flutter there lot of widget provide by flutter. I will give some widget name here below for that you guys know more about that widgets.

Text, Image, Icon, Card, ListView, ListTile, GridView , Expanded these are used commonly and most of widget used commonly as used case.

Expanded Widget

Last thing i going to tell little bit about Expanded Widget. This widget we are using in Row Widget. What this widget do the question is arise? Answer is :- This widget is work as match parent in linearLayout with orientation is Horizontal and weight is divided equally.

For this layout we are using Row with two children TextFormField and RaisedButton with Expanded Widget like following example:-

If i removed Expanded from RaisedButton then layout is look like this:-

Code is look like this:-

I hope how Expanded Widget is work in Row Widget.

I hope this article is helpful. Please don’t forget to give suggestions.