Row in Flutter is one of the most commonly used widgets to create UI layouts. It is used to arrange other widgets in a horizontal direction.

A Row widget arranges its children widgets horizontally, from left to right.

In this blog post, we will explore the Row widget in Flutter, how to use it, and its properties.

What is a Row in Flutter?

In Flutter, the Row widget is used to arrange its child widgets in a horizontal row. The children of a Row are laid out in the order they are added, from left to right by default. You can add any number of child widgets to a Row, and they will be placed one after another. The Row widget is a flexible widget that adjusts its width based on the size of its children.

How to use the Row Widget in Flutter?

Using the Row widget in Flutter is simple. You can add any number of child widgets to a Row, and they will be placed horizontally, one after another. Here’s an example of how to use the Row widget in Flutter:

Row(
        children: [
         const Text('First'),
          ElevatedButton(child: const Text("Click me"),onPressed:(){}),
         Container(
           padding: const EdgeInsets.all(20),
           color:Colors.red,
           child:const Text("Text")),
        ],
      ),

Output

Properties of the Row Widget

The Row widget has several properties that allow you to customize its behavior and appearance. Let’s take a look at some of the most commonly used properties of the Row widget in Flutter:

Row widgets in Flutter have a property called mainAxisAlignment and crossAxisAlignment, which determines how the children’s widgets should be aligned along the main axis and the cross-axis.

1) mainAxisAlignment

For the Row widget, the main axis is horizontal.

There are various options for main axis alignment.

a) MainAxisAlignment.start: It aligns the children at the start of the main axis i.e left of the screen. It is the default alignment of the main axis in Row.

Row(
        mainAxisAlignment:MainAxisAlignment.start,
        children: [
          ElevatedButton(child: const Text("Click me"), onPressed: () {}),
          const Text('First'),
          Container(
              padding: const EdgeInsets.all(20),
              color: Colors.red,
              child: const Text("Text")),
        ],
      )

Output
The out for the MainAxisAlignment.start is the same as the image output above.

b) MainAxisAlignment.end: It aligns the children at the end of the main axis i.e right side of the screen.

Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          ElevatedButton(child: const Text("Click me"), onPressed: () {}),
          const Text('First'),
          Container(
              padding: const EdgeInsets.all(20),
              color: Colors.red,
              child: const Text("Text")),
        ],
      )

Output

c) MainAxisAlignment.center: It centers the children along the main axis.

Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(child: const Text("Click me"), onPressed: () {}),
          const Text('First'),
          Container(
              padding: const EdgeInsets.all(20),
              color: Colors.red,
              child: const Text("Text")),
        ],
      )

Output

d) MainAxisAlignment.spaceEvenly: It distributes the children evenly along the main axis, with equal space between each child and the edges.

 Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          ElevatedButton(child: const Text("Click me"), onPressed: () {}),
          const Text('First'),
          Container(
              padding: const EdgeInsets.all(20),
              color: Colors.red,
              child: const Text("Text")),
        ],
      )

e) MainAxisAlignment.spaceBetween: It distributes the children evenly along the main axis, with equal space between each child but not at the edges.

Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          ElevatedButton(child: const Text("Click me"), onPressed: () {}),
          const Text('First'),
          Container(
              padding: const EdgeInsets.all(20),
              color: Colors.red,
              child: const Text("Text")),
        ],
      )

f) MainAxisAlignment.spaceAround: It distributes the children evenly along the main axis, with equal space between each child and half the space at the edges.

Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          ElevatedButton(child: const Text("Click me"), onPressed: () {}),
          const Text('First'),
          Container(
              padding: const EdgeInsets.all(20),
              color: Colors.red,
              child: const Text("Text")),
        ],
      )

2) crossAxisAlignment

You can also set the crossAxisAlignment property to control how the children should be aligned perpendicular to the main axis (i.e., along the cross-axis). The available options for crossAxisAlignment are similar to those for mainAxisAlignment.

a) CrossAxisAlignment.start: It aligns the children at the start of the cross-axis (top).

Row(
        crossAxisAlignment:CrossAxisAlignment.start,
        children: [
          ElevatedButton(child: const Text("Click me"), onPressed: () {}),
          const Text('First'),
          Container(
              padding: const EdgeInsets.all(20),
              color: Colors.red,
              child: const Text("Text")),
        ],
      )

b) CrossAxisAlignment.end: It aligns the children at the end of the cross-axis (bottom).

Row(
        crossAxisAlignment:CrossAxisAlignment.end,
        children: [
          ElevatedButton(child: const Text("Click me"), onPressed: () {}),
          const Text('First'),
          Container(
              padding: const EdgeInsets.all(20),
              color: Colors.red,
              child: const Text("Text")),
        ],
      )

c) CrossAxisAlignment.center: It centers the children widgets along the cross-axis.

Row(
        crossAxisAlignment:CrossAxisAlignment.center,
        children: [
          ElevatedButton(child: const Text("Click me"), onPressed: () {}),
          const Text('First'),
          Container(
              padding: const EdgeInsets.all(20),
              color: Colors.red,
              child: const Text("Text")),
        ],
      )

d) CrossAxisAlignment.stretch: It stretches the children to fill the cross axis.

Row(
        crossAxisAlignment:CrossAxisAlignment.stretch,
        children: [
          ElevatedButton(child: const Text("Click me"), onPressed: () {}),
          const Text('First'),
          Container(
              padding: const EdgeInsets.all(20),
              color: Colors.red,
              child: const Text("Text")),
        ],
      )

e) CrossAxisAlignment.baseline: It aligns the children along a common baseline.

3) mainAxisSize

The mainAxisSize property of the Row widget allows you to control the size of the Row widget along the main axis. There are two available options for mainAxisSize:

a) MainAxisSize.max: The Row widget will take up as much horizontal space as possible.

b) MainAxisSize.min: The Row widget will take up only as much horizontal space as needed to contain its children widgets.

Conclusion

The Row widget is a powerful tool for laying out child widgets horizontally in a Flutter app. By using the MainAxisAlignment and CrossAxisAlignment properties, you can control how the child widgets are aligned along the horizontal and vertical axes, respectively. With the Row widget, you can create beautiful and effective layouts for your mobile applications in Flutter.

Thanks for reading this article 

Also, follow to get updated on exciting articles and projects.

If I got something wrong? Let me know in the comments. I would love to improve.

Let’s get connected

We can be friends. Find on Facebook, Linkedin, Github, YouTube, 

BuyMeACoffee, and Instagram.

Contribute: BuyMeACoffee

Contact: Contact Us