What is Row in Flutter: Explanation and Example

In Flutter, a Row is a widget that arranges its child widgets horizontally in a single line. It is used to place widgets side by side, like items on a shelf, and helps create flexible horizontal layouts.

How It Works

A Row widget in Flutter works like a horizontal container that holds other widgets next to each other from left to right. Imagine a row of books on a shelf where each book is a widget. The Row arranges these books side by side in a straight line.

It takes a list of child widgets and places them horizontally. If the widgets are too wide to fit on the screen, the Row may overflow, so you often control their size or use scrolling. You can also align the children inside the Row using properties like mainAxisAlignment and crossAxisAlignment to control spacing and vertical alignment.

Example

This example shows a Row with three colored boxes placed side by side horizontally.

dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Row Example')),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(width: 50, height: 50, color: Colors.red),
              Container(width: 50, height: 50, color: Colors.green),
              Container(width: 50, height: 50, color: Colors.blue),
            ],
          ),
        ),
      ),
    );
  }
}

Output

A screen with an app bar titled 'Row Example' and below it, three small square boxes colored red, green, and blue arranged horizontally in the center.

When to Use

Use a Row when you want to place widgets side by side horizontally. For example, you might use a Row to create a navigation bar with buttons, display icons next to text, or arrange images in a line.

It is ideal for layouts where horizontal alignment matters, such as toolbars, menus, or forms with labels and input fields next to each other.

Key Points

• Row arranges children horizontally in a single line.
• Use mainAxisAlignment to control horizontal spacing.
• Use crossAxisAlignment to control vertical alignment.
• Children can overflow if too wide; manage sizes or use scrolling.
• Commonly used for horizontal menus, buttons, and icon-text layouts.

Key Takeaways

Row arranges widgets horizontally in a single line.

Use mainAxisAlignment and crossAxisAlignment to control layout inside a Row.

Row is perfect for placing buttons, icons, or text side by side.

Be careful of overflow if children are too wide for the screen.

Row helps build flexible horizontal layouts in Flutter apps.