Row

A widget that displays its children in a horizontal array.

To cause a child to expand to fill the available horizontal space, wrap the child in an Expanded widget.

The Row widget does not scroll (and in general it is considered an error to have more children in a Row than will fit in the available room). If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a ListView.

Row(
  children: <Widget>[
    Expanded(
      child: Text('Hello,', textAlign: TextAlign.center),
    ),
    Expanded(
      child: Text('Your name!', textAlign: TextAlign.center),
    ),
    Expanded(
      child: FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: const FlutterLogo(),
      ),
    ),
  ],
)

Layout algorithm

This section describes how a Row is rendered by the framework. See BoxConstraints for an introduction to box layout models.

Layout for a Row proceeds in six steps:

  1. Layout each child a null or zero flex factor (e.g., those that are not Expanded) with unbounded horizontal constraints and the incoming vertical constraints. If the crossAxisAlignment is CrossAxisAlignment.stretch, instead use tight vertical constraints that match the incoming max height.
  2. Divide the remaining horizontal space among the children with non-zero flex factors (e.g., those that are Expanded) according to their flex factor. For example, a child with a flex factor of 2.0 will receive twice the amount of horizontal space as a child with a flex factor of 1.0.
  3. Layout each of the remaining children with the same vertical constraints as in step 1, but instead of using unbounded horizontal constraints, use horizontal constraints based on the amount of space allocated in step 2. Children with Flexible.fit properties that are FlexFit.tight are given tight constraints (i.e., forced to fill the allocated space), and children with Flexible.fit properties that are FlexFit.loose are given loose constraints (i.e., not forced to fill the allocated space).
  4. The height of the Row is the maximum height of the children (which will always satisfy the incoming vertical constraints).
  5. The width of the Row is determined by the mainAxisSize property. If the mainAxisSize property is MainAxisSize.max, then the width of the Row is the max width of the incoming constraints. If the mainAxisSize property is MainAxisSize.min, then the width of the Row is the sum of widths of the children (subject to the incoming constraints).
  6. Determine the position for each child according to the mainAxisAlignment and the crossAxisAlignment. For example, if the mainAxisAlignment is MainAxisAlignment.spaceBetween, any horizontal space that has not been allocated to children is divided evenly and placed between the children.

CrossAxisAlignment Propery

We can use the crossAxisAlignment property to align our child widget in the desired direction, for example, crossAxisAlignment.start would place the children with their start edge aligned with the start side of the cross axis.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      color: Colors.blue,
      height: 50.0,
      width: 50.0,
    ),
    Icon(Icons.adjust, size: 50.0, color: Colors.pink),
    Icon(Icons.adjust, size: 50.0, color: Colors.purple,),
    Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent,),
    Container(
      color: Colors.orange,
      height: 50.0,
      width: 50.0,
    ),
    Icon(Icons.adjust, size: 50.0, color: Colors.cyan,),
  ],
);

CrossAxisAlignment.center

Place the children so that their centers align with the middle of the cross axis.

CrossAxisAlignment.end

Place the children as close to the end of the cross axis as possible.

CrossAxisAlignment.stretch

Require the children to fill the cross axis.

CrossAxisAlignment.baseline

Place the children along the cross axis such that their baselines match.

You should use TextBaseline Class with the CrossAxisAlignment.baseline.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      'Flutter',
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 30.0
      ),
    ),
    Text(
      'Flutter',
      style: TextStyle(
          color: Colors.blue,
          fontSize: 20.0
      ),
    ),
  ],
);
Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: [
    Text(
      'Flutter',
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 30.0
      ),
    ),
    Text(
      'Flutter',
      style: TextStyle(
          color: Colors.blue,
          fontSize: 20.0
      ),
    ),
  ],
);

TextDirection Propery

Determines the order to lay children out horizontally and how to interpret start and end in the horizontal direction.

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  textDirection: TextDirection.rtl,
  children: [
    Text(
      'Flutter',
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 30.0
      ),
    ),
    Text(
      'Flutter',
      style: TextStyle(
          color: Colors.blue,
          fontSize: 20.0
      ),
    ),
  ],
);
Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  textDirection: TextDirection.ltr,
  children: [
    Text(
      'Flutter',
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 30.0
      ),
    ),
    Text(
      'Flutter',
      style: TextStyle(
          color: Colors.blue,
          fontSize: 20.0
      ),
    ),
  ],
);

VerticalDirection Propery

Determines the order to lay children out vertically and how to interpret start and end in the vertical direction.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  verticalDirection: VerticalDirection.down,
  children: [
    Text(
      'Flutter',
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 30.0
      ),
    ),
    Text(
      'Flutter',
      style: TextStyle(
          color: Colors.blue,
          fontSize: 20.0
      ),
    ),
  ],
);
Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  verticalDirection: VerticalDirection.up,
  children: [
    Text(
      'Flutter',
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 30.0
      ),
    ),
    Text(
      'Flutter',
      style: TextStyle(
          color: Colors.blue,
          fontSize: 20.0
      ),
    ),
  ],
);

MainAxisAlignment Propery

The positioning of the child widgets on the main axis.

MainAxisAlignment.start

Place the children as close to the start of the main axis as possible.

MainAxisAlignment.center

Place the children as close to the middle of the main axis as possible.

MainAxisAlignment.end

Place the children as close to the end of the main axis as possible.

MainAxisAlignment.spaceAround

Place the free space evenly between the children as well as half of that space before and after the first and last child.

MainAxisAlignment.spaceBetween

Place the free space evenly between the children.

MainAxisAlignment.spaceEvenly

Place the free space evenly between the children as well as before and after the first and last child.

MainAxisSize Propery

The size that should be allocated to the widget on the main axis.

MainAxisSize.max

Maximize the amount of free space along the main axis, subject to the incoming layout constraints.

Center(
  child: Container(
    color: Colors.yellow,
    child: Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          color: Colors.blue,
          height: 50.0,
          width: 50.0,
        ),
        Icon(Icons.adjust, size: 50.0, color: Colors.pink),
        Icon(Icons.adjust, size: 50.0, color: Colors.purple,),
        Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent,),
        Container(
          color: Colors.orange,
          height: 50.0,
          width: 50.0,
        ),
        Icon(Icons.adjust, size: 50.0, color: Colors.cyan,),
      ],
    ),
  ),
);

MainAxisSize.min

Minimize the amount of free space along the main axis, subject to the incoming layout constraints.

Center(
  child: Container(
    color: Colors.yellow,
    child: Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          color: Colors.blue,
          height: 50.0,
          width: 50.0,
        ),
        Icon(Icons.adjust, size: 50.0, color: Colors.pink),
        Icon(Icons.adjust, size: 50.0, color: Colors.purple,),
        Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent,),
        Container(
          color: Colors.orange,
          height: 50.0,
          width: 50.0,
        ),
        Icon(Icons.adjust, size: 50.0, color: Colors.cyan,),
      ],
    ),
  ),
);

Leave a Reply

Your email address will not be published.