Flutter Row

Arranging widgets horizontally in Flutter

🔄 What is Row?

Row is a Flutter widget that arranges its children horizontally in a single line from left to right. It's perfect for creating horizontal layouts like navigation bars, button groups, and inline elements. 


// Simple Row example
Row(
  children: [
    Text('Hello'),
    Text('World'),
  ],
)

Output:

Hello World

Key Row Concepts

➡️

Horizontal Layout

Arranges children left to right 

Row(
  children: [
    Icon(Icons.star),
    Icon(Icons.star),
  ],
)
📏

MainAxisAlignment

Controls horizontal spacing 

Row(
  mainAxisAlignment:
    MainAxisAlignment.center,
  children: [...],
)
↕️

CrossAxisAlignment

Controls vertical alignment 

Row(
  crossAxisAlignment:
    CrossAxisAlignment.start,
  children: [...],
)
🔢

Multiple Children

Add any number of widgets 

Row(
  children: [
    Text('A'),
    Text('B'),
    Text('C'),
  ],
)

🔹 Basic Row Example

Create a simple horizontal layout with icons and text: 

Row(
  children: [
    Icon(Icons.home, size: 30),
    SizedBox(width: 10),
    Text('Home', style: TextStyle(fontSize: 20)),
  ],
)

Output:

🏠 Home

🔹 MainAxisAlignment Options

Control how children are positioned horizontally: 

// Center alignment
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('A'),
    Text('B'),
    Text('C'),
  ],
)

// Space between
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text('Start'),
    Text('Middle'),
    Text('End'),
  ],
)

// Space around
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
  ],
)

Output (spaceBetween):

Start Middle End

🔹 CrossAxisAlignment Options

Control vertical alignment of children: 

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      height: 50,
      width: 50,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 50,
      color: Colors.red,
    ),
  ],
)

Output:

🔹 Practical Row Example

Create a user profile row with avatar and info: 

Row(
  children: [
    CircleAvatar(
      radius: 30,
      backgroundColor: Colors.blue,
      child: Icon(Icons.person, color: Colors.white),
    ),
    SizedBox(width: 15),
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('John Doe', 
          style: TextStyle(
            fontSize: 18, 
            fontWeight: FontWeight.bold
          )
        ),
        Text('Flutter Developer',
          style: TextStyle(color: Colors.grey)
        ),
      ],
    ),
  ],
)

Output:

👤
John Doe
Flutter Developer

🧠 Test Your Knowledge

What direction does Row arrange its children?