Flutter Row Widget Examples

A row can display its children in a horizontal array. If you want to display widget into columns or display an icon to the left of a label, you can use Flutter Row widget.

Row with 3 columns and aligned and spaced evenly with MainAxisAlignment.spaceAround.

Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),Container(
            width: 100,
            height: 100,
            color: Colors.green,
          ),
        ],
      )

Row with 3 containers which are stretched to fit screen’s height with CrossAxisAlignment.stretch.

Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            width: 100,
            color: Colors.blue,
          ),Container(
            width: 100,
            color: Colors.red,
          ),Container(
            width: 100,
            color: Colors.green,
          ),
        ],
      )

We can use Row in a button to include multiple widgets.

OutlinedButton(
          onPressed: () {  },
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Icon(Icons.add),
              SizedBox(width: 16),
              Text('Add')
            ],
          ),
        )