Flutter Row & Column

Syntax

Row(
  children: <Widget>[
    Widget1,
    Widget2,
    Widget3,
    ...
  ],
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisAlignment: MainAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
)

Column(
  children: <Widget>[
    Widget1,
    Widget2,
    Widget3,
    ...
  ],
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisAlignment: MainAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
)

Example

Row(
  children: <Widget>[
    Container(
      color: Colors.red,
      height: 50,
      width: 50,
    ),
    Container(
      color: Colors.green,
      height: 100,
      width: 50,
    ),
    Container(
      color: Colors.blue,
      height: 150,
      width: 50,
    ),
  ],
)

Column(
  children: <Widget>[
    Container(
      color: Colors.red,
      height: 50,
      width: 50,
    ),
    Container(
      color: Colors.green,
      height: 100,
      width: 50,
    ),
    Container(
      color: Colors.blue,
      height: 150,
      width: 50,
    ),
  ],
)

Output

Explanation

Both Row and Column are layout widgets used to arrange child widgets horizontally and vertically respectively. The children parameter takes a list of widgets that are arranged in the given order. The crossAxisAlignment and mainAxisAlignment parameters are used to align the child widgets on the cross and main axis respectively. The mainAxisSize parameter is used to determine the maximum size of the Row or Column.

Use

Row and Column can be used to create complex layouts for various applications including but not limited to dashboards, eCommerce sites, and more.

Important Points

• Row is used to arrange child widgets horizontally while Column is used to arrange child widgets vertically.
• The align parameters are used to align the child widgets on the cross and main axis.
• Use mainAxisAlignment to align the widgets along the main horizontal or vertical axis.
• Use crossAxisAlignment to align widgets perpendicular to the main axis.

Summary

Flutter Row and Column widgets are versatile and easy-to-use widgets for creating layout arrangements of child widgets either horizontally or vertically. They allow developers to create complex and dynamic interfaces that can be used for a wide range of applications. By utilizing parameters like crossAxisAlignment, mainAxisAlignment, and mainAxisSize, developers can achieve a wide range of design options for their applications.