Flutter Flex

Create flexible and responsive layouts

📐 What is Flutter Flex?

Flex widgets in Flutter help create flexible layouts that adapt to different screen sizes. Row and Column are the most common flex widgets for arranging children horizontally or vertically with flexible spacing. 


// Simple Row with flexible children
Row(
  children: [
    Expanded(child: Container(color: Colors.red)),
    Expanded(child: Container(color: Colors.blue)),
  ],
)

Key Flex Concepts

↔️

Row

Arrange widgets horizontally in a single line from left to right direction 

Row(
  children: [
    Icon(Icons.star),
    Text('Rating'),
  ],
)
↕️

Column

Arrange widgets vertically in a single line from top to bottom direction 

Column(
  children: [
    Text('Title'),
    Text('Subtitle'),
  ],
)
📏

Expanded

Makes a child widget fill available space in Row or Column flexibly 

Expanded(
  flex: 2,
  child: Container(),
)
🎯

Flexible

Similar to Expanded but allows child to be smaller than available space 

Flexible(
  fit: FlexFit.loose,
  child: Container(),
)

🔹 Basic Row Layout

Arrange widgets horizontally using Row: 

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Icon(Icons.home, size: 40),
    Icon(Icons.search, size: 40),
    Icon(Icons.settings, size: 40),
  ],
)

Result:

Three icons displayed horizontally with equal spacing between them.

🔹 Basic Column Layout

Arrange widgets vertically using Column: 

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      'Welcome',
      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    ),
    SizedBox(height: 8),
    Text('This is a subtitle'),
    SizedBox(height: 16),
    ElevatedButton(
      onPressed: () {},
      child: Text('Get Started'),
    ),
  ],
)

Result:

Title, subtitle, and button stacked vertically with proper spacing.

🔹 Using Expanded Widget

Make children fill available space proportionally: 

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        height: 100,
        color: Colors.red,
        child: Center(child: Text('1/3')),
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        height: 100,
        color: Colors.blue,
        child: Center(child: Text('2/3')),
      ),
    ),
  ],
)

Result:

Red container takes 1/3 of width, blue container takes 2/3 of width.

🔹 MainAxisAlignment

Control how children are positioned along the main axis: 

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

// Center children
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.favorite),
    Text('Centered'),
  ],
)

// Space evenly
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Icon(Icons.home),
    Icon(Icons.search),
    Icon(Icons.person),
  ],
)

Result:

Children positioned with different spacing strategies: between, center, or evenly distributed.

🔹 CrossAxisAlignment

Control how children are positioned along the cross axis: 

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Aligned to start'),
    Text('Also at start'),
  ],
)

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Centered'),
    Icon(Icons.star),
  ],
)

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(height: 50, color: Colors.blue),
    Container(height: 50, color: Colors.red),
  ],
)

Result:

Children aligned to start, center, or stretched to fill the cross axis width.

🔹 Flexible vs Expanded

Understand the difference between Flexible and Expanded: 

Row(
  children: [
    // Expanded forces child to fill space
    Expanded(
      child: Container(
        height: 50,
        color: Colors.red,
        child: Text('Expanded'),
      ),
    ),
    // Flexible allows child to be smaller
    Flexible(
      child: Container(
        height: 50,
        color: Colors.blue,
        child: Text('Flexible'),
      ),
    ),
  ],
)

Result:

Expanded fills all available space. Flexible takes only the space it needs.

🧠 Test Your Knowledge

Which widget arranges children horizontally?