In Flutter, the layout design revolves around widgets. Two of the most essential layout widgets are Columnand 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 Columnwidget in Flutter is used to align child widgets in a vertical manner. It’s similar to a vertical LinearLayoutin Android or a vertical StackPanelin 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 Rowwidget arranges its children horizontally. It’s akin to a horizontal LinearLayoutin Android or a horizontal StackPanelin UWP. Here’s an example:
Here, mainAxisAlignmentis set to MainAxisAlignment.spaceEvenly, which distributes the children evenly across the horizontal axis with equal spacing.
Combining Column and Row
You can nest Rowand Columnwidgets to create complex layouts. Here’s a nested example:
In this nested layout, a Rowis placed inside a Column, combining both horizontal and vertical alignment.
Conclusion
Understanding the Columnand Rowwidgets 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)