Row in Flutter

Create Free Backend With Appwrite

Row Widget In Flutter

In Flutter, Row widget displays its children horizontally. It is very useful when placing UI side by side. This is one of the most used widget in flutter.

Example 1: Row In Flutter

In this example, the Row contains three children widgets which are Icon, Text, and Icon.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My First App'),
        ),
        body: const Row(
          children: [
            Icon(Icons.star, size: 50),
            Text('I am learning flutter'),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),
    ),
  );
}
Run Online

Example 2: Create Rating Bar Using Flutter

In this example, you will learn to build star rating bar using row widget.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Row In Flutter'),
        ),
        body: const Row(
          children: [
            Icon(Icons.star, color: Colors.yellow),
            Icon(Icons.star, color: Colors.yellow),
            Icon(Icons.star, color: Colors.yellow),
            Icon(Icons.star, color: Colors.yellow),
            Icon(Icons.star_border, color: Colors.yellow),
          ],
        ),
      ),
    ),
  );
}
Run Online

Row Properties

These are the most common useful properties of the Row widget which helps you control the layout of its children:

Property Description
mainAxisAlignment Determines how the children are aligned horizontally.
crossAxisAlignment Determines how the children are aligned vertically.
children The widgets that are displayed inside the row.

Main Axis In Row

In Row, main axis determines how the children are aligned horizontally. The mainAxisAlignment property accepts the following values:

MainAxisAlignment Values Description
MainAxisAlignment.start Children are aligned at the start of the horizontal axis.
MainAxisAlignment.end Children are aligned at the end of the horizontal axis.
MainAxisAlignment.center Children are centered along the horizontal axis.
MainAxisAlignment.spaceBetween Children have equal spacing between them.
MainAxisAlignment.spaceAround Children have equal spacing between them, and also the space at the start and the end is divided evenly.
MainAxisAlignment.spaceEvenly Children have equal spacing before, between, and after them.

Example 3: Main Axis Alignment

In this example, you see 5 stars which are in center horizontally. Run this code online and try changing center to start, end, spaceBetween, spaceAround or spaceEvenly.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Row In Flutter'),
        ),
        body: const Row(
          // Try replacing "center" with "start", "end", "spaceBetween", "spaceAround" or "spaceEvenly"
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.star, color: Colors.yellow),
            Icon(Icons.star, color: Colors.yellow),
            Icon(Icons.star, color: Colors.yellow),
            Icon(Icons.star, color: Colors.yellow),
            Icon(Icons.star_border, color: Colors.yellow),
          ],
        ),
      ),
    ),
  );
}
Run Online
Info

Note: By default mainAxisAlignment value is mainAxisAlignment.start

Cross Axis In Row

In Row, cross axis determines how the children are aligned vertically. The crossAxisAlignment property accepts the following values:

CrossAxisAlignment Values Description
CrossAxisAlignment.start Children are aligned at the top of the Row.
CrossAxisAlignment.end Children are aligned at the bottom of the Row.
CrossAxisAlignment.center Children are vertically centered in the Row.
CrossAxisAlignment.stretch Children are forced to fill the available space vertically.
CrossAxisAlignment.baseline Children are aligned by their baseline (useful for text).

Example 4: Cross Axis Alignment

In this example, you see 5 stars which are in center vertically. Run this code online and try changing center to start, end, stretch, baseline.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Row In Flutter'),
        ),
        body: Container(
          color: Colors.green,
          height: double.infinity,
          child: const Row(
            // Try replacing "center" with "start", "end", "stretch" or "baseline"
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(Icons.star, color: Colors.yellow),
              Icon(Icons.star, color: Colors.yellow),
              Icon(Icons.star, color: Colors.yellow),
              Icon(Icons.star, color: Colors.yellow),
              Icon(Icons.star_border, color: Colors.yellow),
            ],
          ),
        ),
      ),
    ),
  );
}
Run Online
Info

Note: By default crossAxisAlignment value is crossAxisAlignment.center

Example 5: Using Main Axis & Cross Axis Alignment

In this example, you see 5 stats which are in center horizontally and vertically. Run this code online and try changing its main axis and cross axis alignement.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Row In Flutter'),
        ),
        body: Container(
          color: Colors.green,
          height: double.infinity,
          child: const Row(
            // Try replacing "center" with "start", "end", "spaceAround" or "spaceEvenly"
          mainAxisAlignment: MainAxisAlignment.center,
            // Try replacing "center" with "start", "end", "stretch" or "baseline"
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(Icons.star, color: Colors.yellow),
              Icon(Icons.star, color: Colors.yellow),
              Icon(Icons.star, color: Colors.yellow),
              Icon(Icons.star, color: Colors.yellow),
              Icon(Icons.star_border, color: Colors.yellow),
            ],
          ),
        ),
      ),
    ),
  );
}
Run Online

Overflow Issue

When you put too many widgets inside a Row and they can’t fit within the screen, you’ll get an overflow error. Here are simple ways to handle this overflow issue in Flutter:

  • Wrap in SingleChildScrollView widget
  • Use Expanded or Flexible widget

Example 6: Wrap In SingleChildScrollView

When you have many children widgets, and they can’t all fit on the screen, you might want to scroll to see the ones that are out of view. For more see the example below:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Row In Flutter'),
        ),
        body: Container(
          color: Colors.green,
          height: double.infinity,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              // Try replacing "center" with "start", "end", "spaceAround", "spaceEvenly" or "spaceBetween"
              mainAxisAlignment: MainAxisAlignment.center,
              // Try replacing "center" with "start", "end", "stretch" or "baseline"
              crossAxisAlignment: CrossAxisAlignment.center,
              children: List.generate(
                  50, (index) => const Icon(Icons.star, color: Colors.yellow)),
            ),
          ),
        ),
      ),
    ),
  );
}
Run Online

Example 7: Using Expanded

In a Row, use Expanded to make a widget take up all the available remaining space within its parent widget. For more, see the example below:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Row In Flutter'),
        ),
        body: Container(
          color: Colors.green,
          height: double.infinity,
          child: Row(
             // Try replacing "center" with "start", "end", "spaceAround", "spaceEvenly" or "spaceBetween"
            mainAxisAlignment: MainAxisAlignment.center,
            // Try replacing "center" with "start", "end", "stretch" or "baseline"
            crossAxisAlignment: CrossAxisAlignment.center,
            children: List.generate(
                50,
                (index) =>  const Expanded(
                    child: Icon(Icons.star, color: Colors.yellow))),
          ),
        ),
      ),
    ),
  );
}
Run Online

Example 8: Using Flexible

Flexible allows a widget within a Row to fit its content but won’t exceed its maximum size, even if there’s extra space available. For more, see the example below:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Row In Flutter'),
        ),
        body: Container(
          color: Colors.green,
          height: double.infinity,
          child: Row(
             // Try replacing "center" with "start", "end", "spaceAround", "spaceEvenly" or "spaceBetween"
            mainAxisAlignment: MainAxisAlignment.center,
             // Try replacing "center" with "start", "end", "stretch" or "baseline"
            crossAxisAlignment: CrossAxisAlignment.center,
            children: List.generate(
                50,
                (index) => const Flexible(
                    fit: FlexFit.loose,
                    child: Icon(Icons.star,  color: Colors.yellow))),
          ),
        ),
      ),
    ),
  );
}
Run Online
Info

Note: Expanded forces its child to fill available space, while Flexible allows its child to occupy space without necessarily filling it.