In Flutter, the layout design revolves around widgets. Two of the most essential layout widgets are Column
and Row
. They control how child widgets are positioned vertically and horizontally, respectively. Let’s dive into the details and see them in action with example code.
The Column Widget
The Column
widget in Flutter is used to align child widgets in a vertical manner. It’s similar to a vertical LinearLayout
in Android or a vertical StackPanel
in UWP. Here’s a simple example:
In this example, the mainAxisAlignment
property is set to MainAxisAlignment.center
, which centers the children vertically. The crossAxisAlignment
is set to CrossAxisAlignment.start
, aligning the children to the start of the cross axis (horizontally in this case).
The Row Widget
Conversely, the Row
widget arranges its children horizontally. It’s akin to a horizontal LinearLayout
in Android or a horizontal StackPanel
in UWP. Here’s an example:
Here, mainAxisAlignment
is set to MainAxisAlignment.spaceEvenly
, which distributes the children evenly across the horizontal axis with equal spacing.
Combining Column and Row
You can nest Row
and Column
widgets to create complex layouts. Here’s a nested example:
In this nested layout, a Row
is placed inside a Column
, combining both horizontal and vertical alignment.
Conclusion
Understanding the Column
and Row
widgets is crucial for effective layout design in Flutter. Experiment with the properties and nesting to create the desired UI for your app.
Top comments (0)