DEV Community

Cover image for Understanding Flutter Widgets: Column vs Row
Eldho Paulose
Eldho Paulose

Posted on • Updated on

Understanding Flutter Widgets: Column vs Row

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:

Image description

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).

Image description

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:

Image description

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:

Image description

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.

Contact with me
GitHub

Top comments (0)