Flutter Column

Arranging widgets vertically in Flutter

⬇️ What is Column?

Column is a Flutter widget that arranges its children vertically from top to bottom. It's ideal for creating vertical layouts like forms, lists, and stacked content sections in your app. 


// Simple Column example
Column(
  children: [
    Text('First'),
    Text('Second'),
  ],
)

Output:

First Second

Key Column Concepts

⬇️

Vertical Layout

Arranges children top to bottom 

Column(
  children: [
    Text('Top'),
    Text('Bottom'),
  ],
)
📏

MainAxisAlignment

Controls vertical spacing 

Column(
  mainAxisAlignment:
    MainAxisAlignment.center,
  children: [...],
)
↔️

CrossAxisAlignment

Controls horizontal alignment 

Column(
  crossAxisAlignment:
    CrossAxisAlignment.start,
  children: [...],
)
📋

Stacked Content

Perfect for forms and lists 

Column(
  children: [
    TextField(),
    TextField(),
    Button(),
  ],
)

🔹 Basic Column Example

Create a simple vertical layout with text and icons: 

Column(
  children: [
    Icon(Icons.favorite, size: 50, color: Colors.red),
    SizedBox(height: 10),
    Text('Like', style: TextStyle(fontSize: 18)),
    Text('Tap to favorite', style: TextStyle(color: Colors.grey)),
  ],
)

Output:

❤️ Like Tap to favorite

🔹 MainAxisAlignment Options

Control how children are positioned vertically: 

// Center alignment
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Centered'),
    Text('Content'),
  ],
)

// Space between
Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text('Top'),
    Text('Middle'),
    Text('Bottom'),
  ],
)

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

Output (spaceEvenly):

🏠 🔍 ⚙️

🔹 CrossAxisAlignment Options

Control horizontal alignment of children: 

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Left aligned'),
    Text('Also left'),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
    ),
  ],
)

Output:

Left aligned Also left

🔹 Practical Column Example

Create a login form using Column: 

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Text('Welcome Back!',
      style: TextStyle(
        fontSize: 24,
        fontWeight: FontWeight.bold,
      ),
      textAlign: TextAlign.center,
    ),
    SizedBox(height: 20),
    TextField(
      decoration: InputDecoration(
        labelText: 'Email',
        border: OutlineInputBorder(),
      ),
    ),
    SizedBox(height: 15),
    TextField(
      decoration: InputDecoration(
        labelText: 'Password',
        border: OutlineInputBorder(),
      ),
      obscureText: true,
    ),
    SizedBox(height: 20),
    ElevatedButton(
      onPressed: () {},
      child: Text('Login'),
    ),
  ],
)

Output:

Welcome Back!

🧠 Test Your Knowledge

What direction does Column arrange its children?