Flutter Alignment

Positioning widgets precisely in your layout

🎯 What is Alignment?

Alignment controls where widgets are positioned within their parent container. Flutter provides multiple ways to align widgets including Align widget, Center widget, and alignment properties for precise positioning anywhere in your layout. 


// Simple alignment example
Align(
  alignment: Alignment.center,
  child: Text('Centered'),
)

Output:

Centered

Key Alignment Concepts

🎯

Align Widget

Position child anywhere 

Align(
  alignment: Alignment.topRight,
  child: Icon(Icons.star),
)
⊕

Center Widget

Quick center alignment 

Center(
  child: Text('Centered'),
)
📍

Alignment Constants

Predefined positions 

Alignment.topLeft
Alignment.center
Alignment.bottomRight
🔢

Custom Alignment

Precise coordinate positioning 

Alignment(0.5, -0.5)
// x: -1 to 1
// y: -1 to 1

🔹 Center Widget

The simplest way to center a widget: 

Container(
  width: 300,
  height: 200,
  color: Colors.blue[50],
  child: Center(
    child: Text(
      'I am centered!',
      style: TextStyle(fontSize: 20),
    ),
  ),
)

Output:

I am centered!

🔹 Align Widget with Predefined Alignments

Position widgets at specific locations: 

// Top Left
Align(
  alignment: Alignment.topLeft,
  child: Icon(Icons.star, color: Colors.blue),
)

// Center
Align(
  alignment: Alignment.center,
  child: Icon(Icons.favorite, color: Colors.red),
)

// Bottom Right
Align(
  alignment: Alignment.bottomRight,
  child: Icon(Icons.settings, color: Colors.green),
)

Output:

⭐ ❤️ ⚙️

🔹 All Alignment Constants

Flutter provides 9 predefined alignment positions: 

Alignment.topLeft       // (-1, -1)
Alignment.topCenter     // (0, -1)
Alignment.topRight      // (1, -1)

Alignment.centerLeft    // (-1, 0)
Alignment.center        // (0, 0)
Alignment.centerRight   // (1, 0)

Alignment.bottomLeft    // (-1, 1)
Alignment.bottomCenter  // (0, 1)
Alignment.bottomRight   // (1, 1)

Visual Guide:

topLeft topCenter topRight centerLeft center centerRight bottomLeft bottomCenter bottomRight

🔹 Custom Alignment with Coordinates

Create precise custom alignments using x and y coordinates: 

Container(
  width: 300,
  height: 200,
  color: Colors.amber[100],
  child: Align(
    alignment: Alignment(0.5, -0.5),
    // x: 0.5 (halfway between center and right)
    // y: -0.5 (halfway between center and top)
    child: Container(
      width: 50,
      height: 50,
      color: Colors.orange,
      child: Center(child: Text('📍')),
    ),
  ),
)

Output:

📍

🔹 Container Alignment Property

Containers have a built-in alignment property: 

Container(
  width: 250,
  height: 150,
  color: Colors.purple[100],
  alignment: Alignment.bottomRight,
  child: Text(
    'Bottom Right',
    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
  ),
)

Output:

Bottom Right

🔹 Practical Alignment Example

Create a notification badge with aligned elements: 

Container(
  width: 300,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(15),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.3),
        blurRadius: 10,
        offset: Offset(0, 5),
      ),
    ],
  ),
  child: Stack(
    children: [
      // Main content centered
      Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.notifications, size: 60, color: Colors.blue),
            SizedBox(height: 10),
            Text('Notifications', style: TextStyle(fontSize: 20)),
          ],
        ),
      ),
      // Badge in top right
      Align(
        alignment: Alignment.topRight,
        child: Container(
          margin: EdgeInsets.all(15),
          padding: EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: Colors.red,
            shape: BoxShape.circle,
          ),
          child: Text(
            '5',
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    ],
  ),
)

Output:

🔔
Notifications
5

🧠 Test Your Knowledge

What widget is the simplest way to center a child?