How to use Row widget in Flutter

The Row widget is a commonly used layout pattern in Flutter applications. It is a multi-child widget that displays its children in a horizontal array. Its main-axis alignment is horizontal, as shown in the image below.

Row widget visual representation
Row widget visual representation

Constructor and parameters

The Row widget provides a constructor with various parameters to customize its behavior and layout.

Row({
  Key? key, 
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, 
  MainAxisSize mainAxisSize = MainAxisSize.max, 
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, 
  TextDirection? textDirection, 
  VerticalDirection verticalDirection = VerticalDirection.down, 
  TextBaseline? textBaseline, 
  List<Widget> children = const <Widget>[]
})

Let's take a closer look at each parameter and its purpose.

  • key: An optional parameter that allows us to provide a unique identifier for the Row widget.

  • mainAxisAlignment: Determines how its children are aligned horizontally within the available space. The default value is MainAxisAlignment.start. Other possible values include MainAxisAlignment.center, MainAxisAlignment.end, and MainAxisAlignment.spaceEvenly, among others.

  • mainAxisSize: Specifies the horizontal size of the Row. The default value is MainAxisSize.max, which allows the Row to occupy all available horizontal space. Alternatively, we can set it MainAxisSize.min  to make the Row take up only the required horizontal space.

  • crossAxisAlignment: Determines how the children are aligned vertically. The default value is CrossAxisAlignment.center. Other options include CrossAxisAlignment.start and CrossAxisAlignment.end, among others.

  • textDirection: An optional parameter that specifies the directionality of the text within the Row.

  • verticalDirection: Specifies the order in which the children of the Column are laid out vertically. The default value is VerticalDirection.down, which arranges the children from top to bottom. We can also use VerticalDirection.up to reverse the order.

  • textBaseline: An optional parameter determining the text's baseline alignment within the Row. By default, it uses the TextBaseline.alphabetic.

  • children: The list of child widgets is stacked horizontally in the Row. We can provide any number of widgets as children. The default value is an empty list ([]).

Implementation

We can follow the instructions given below to add a Row widget in UI:

Import the necessary packages

To use the Row widget, we need to import the flutter/material.dart package in your Dart file.

import 'package:flutter/material.dart';

Create a row widget

To create a Row widget, we can use the Row constructor and provide the desired children widgets as a list.

Row(
  children: <Widget>[
    // Add your children widgets here
  ],
)

Add children to the row

We can add multiple widgets we want to stack horizontally inside the children's property of the Row widget. These children can be any Flutter widgets, such as Text, Image, Container, etc.

Row(
  children: <Widget>[
    Text('Widget 1'),
    Text('Widget 2'),
    Text('Widget 3'),
  ],
)

Customize the row layout

To customize the layout of the Row widget, we can utilize properties such as mainAxisAlignment, crossAxisAlignment, and mainAxisSize, etc. 

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Text('Widget 1'),
    Text('Widget 2'),
    Text('Widget 3'),
  ],
)

  • Line 2: We set Column property mainAxisAlignment to MainAxisAlignment.center, which means the children will be positioned in the middle of the available horizontal space.

  • Line 3: We set Column property crossAxisAlignment to CrossAxisAlignment.start, which ensures the children are positioned on the left side of each row box.

  • Line 4: We set Column property mainAxisSize to MainAxisSize.min, which specifies that the Column should take up only the required vertical space.

Output

We get the following output by putting together the code explained above. 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Row Widget Example'),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                color: Colors.red,
                height: 100,
                width: 100,
                child: Center(child: Text('Widget 1', style: TextStyle(color: Colors.white))),
              ),
              Container(
                color: Colors.green,
                height: 100,
                width: 100,
                child: Center(child: Text('Widget 2', style: TextStyle(color: Colors.white))),
              ),
              Container(
                color: Colors.blue,
                height: 100,
                width: 100,
                child: Center(child: Text('Widget 3', style: TextStyle(color: Colors.white))),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Drawbacks

It is important to remember that one limitation of the Row widget is that it doesn't support horizontal scrolling. As a result, an overflow alert will be shown if the combined height of the children is more than the size of the screen. It can be solved by wrapping the Row widget with SingleChildScrollView and then setting its property scrollDirection to Axis.horizontal as shown below.

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      // Add your child widgets here
    ],
  ),
)

Conclusion

The Row widget in Flutter offers an easier way to arrange multiple children in a vertical layout. We can customize the Column widget using optional named arguments such as child alignment, main axis size, padding, color, and render direction.

Additional resources

You can learn about other Flutter widgets from the following resources:

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved