Flutter Layout Patterns : Rows (Horizontal ) & Columns(Vertical)

Aligning the widgets in flutter App using layout patterns.

Arrangement of Objects in Row and Column

Introduction

The above picture make us remember our School life when we were arranging our books as in above picture .

Similarly, when we are designing any screen for our Flutter we need to place our Widgets as per our design requirements. To arrange the various Widgets in Flutter we have two Layout Patterns namely Row and Column. You control how a row or column aligns its children using the mainAxisAlignment and crossAxisAlignment properties . Both Row and column hold the array of Widgets in its child attribute. Column and rows can also be nested .

1. Row : Row is used in flutter when we need to place one widget beside another as show in the following picture. In case of row, the main axis runs horizontally and the cross axis runs vertically . Row in flutter is equivalent to LinearLayout with orientation:horizontal of Android.

Arrangement of Books in a Row(Left -to-right).

Flutter code for arranging the Widgets in a row.

2. Column : Column is used in flutter when we need to place one widget beside another as show in the following picture. For a column, the main axis runs vertically and the cross axis runs horizontally. Column in flutter is equivalent to LinearLayout with orientation:vertical of Android.

Arrangement of Books in column(top-to-bottom).

Flutter code for arranging the Widgets in Column.

MainAxisAlignment and crossAxisAlignment attributes are used for handling the relative positioning of Widgets on both the Axis respectively. These attributes accept the following values

1. start : It will position children near the beginning of the main axis. (Left for Row & top for Column).

flutter code for aligning the widget from left

2. end : It will position children near the end of the main axis. (Right for Row, bottom for Column).

flutter code for aligning the widget from right

3. center : It will position the children at the middle of the main axis.

flutter code for aligning the widgett o center

4. spaceBetween : It will divide the extra space evenly between children.

flutter code for dividing the free space evenly between the Widgets

5. spaceEvenly : divides the free space evenly between, before, and after each widget .

flutter code for dividing the free space evenly before and after each Widget

6. spaceAround : It is Similar to MainAxisAligment.spaceEvenly , but reduces half of the space before the first child and after the last child to half of the width between the children.

flutter code for reducing the half of the space before the first child and after the last child to half of the width between the children.

Final Code with All possible Arrangements

flutter code with all possible arrangements of all child widgets of

Output Screen of the final code

References

Flutter developer documentation

Google

Did I get something wrong? Mention it in the comments. I would love to improve.

If you liked what you read, please leave some claps!

Thanks for reading

To learn more about app development using flutter , follow me so that you’ll get notified when i post next blog.

LinkedIn : https://www.linkedin.com/in/alok1997/

Little about me

Hi, I am Alok Kumar (Mobile App Developer) and I love to develop mobile applications using Android and flutter and always ready to learn new technologies related to my field of interest .