The rows and columns are the most basic blocks of Flutter app development. Any and all the widgets you have will either be in rows or columns
Well, I am back after a long break and this break has taught me many new things about app development in general. So with many things to share with you guys, let's start with Rows and Columns in Flutter. You can also have a look at my previous post where I have explained about working with
Images in Flutter. So without any further ado, let's start with Rows and Columns in Flutter.
Rows and Columns in Flutter
If you have developed apps for android, you know there are many layouts such as Relative Layout, Constraint Layout, and so on but in Flutter, the designs are solely based on Rows and Columns only. You can fit a Row inside a Column, Column inside a Row, and so on to create a range of different UI screens that fit on the screen of any sizes.
If you have even been into Android Development, think of Rows and Columns as Linear Layout with horizontal and vertical orientations. The rows and columns are the most basic blocks of Flutter app development. Any and all the widgets you have will either be in rows or columns. Here is the code for the Row and Column widget in the flutter.
Row Widget:
[Row(children:<Widget>[//Widgets come here])]
Column Widget:
[Column(children:<Widget>[//Widgets come here])]
Row and columns have one main attribute. Which is mainAxisAlignment. There are several different options for this attribute like MainAxisAlignment.center, MainAxisAlignment.start, MainAxisAlignment.end. These attributes align the widgets at the start, end, and center of the row/column respectively. The other options are spaceEvenly, which spaces children evenly across the screen of the device, spaceBetween, which spaces children at the start and end of the row/column, and so on.
Though the widgets are not scrollable they become once they have wrapped with SingleChildScrollContainer() widget. You can play around with the code of Rows and Columns at https://codepen.io/flutter.
Rows and Columns in Flutter official documentation
COMMENTS