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.
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 theRowwidget.mainAxisAlignment: Determines how its children are aligned horizontally within the available space. The default value isMainAxisAlignment.start. Other possible values includeMainAxisAlignment.center,MainAxisAlignment.end, andMainAxisAlignment.spaceEvenly, among others.mainAxisSize: Specifies the horizontal size of theRow. The default value isMainAxisSize.max, which allows theRowto occupy all available horizontal space. Alternatively, we can set itMainAxisSize.minto make theRowtake up only the required horizontal space.crossAxisAlignment: Determines how the children are aligned vertically. The default value isCrossAxisAlignment.center. Other options includeCrossAxisAlignment.startandCrossAxisAlignment.end, among others.textDirection: An optional parameter that specifies the directionality of the text within theRow.verticalDirection: Specifies the order in which the children of the Column are laid out vertically. The default value isVerticalDirection.down, which arranges the children from top to bottom. We can also useVerticalDirection.upto reverse the order.textBaseline: An optional parameter determining the text's baseline alignment within theRow. By default, it uses theTextBaseline.alphabetic.children: The list of child widgets is stacked horizontally in theRow. 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
ColumnpropertymainAxisAlignmenttoMainAxisAlignment.center, which means the children will be positioned in the middle of the available horizontal space.Line 3: We set
ColumnpropertycrossAxisAlignmenttoCrossAxisAlignment.start, which ensures the children are positioned on the left side of each row box.Line 4: We set
ColumnpropertymainAxisSizetoMainAxisSize.min, which specifies that theColumnshould 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:
