How to Create Layout in Flutter: Simple Guide with Examples

In Flutter, you create layouts by combining widgets like Column, Row, and Container to arrange UI elements vertically, horizontally, or with padding and alignment. Use Scaffold as the base and nest layout widgets to build your screen structure.

Syntax

Flutter layouts are built using widgets. The main layout widgets are Column for vertical layout, Row for horizontal layout, and Container for styling and spacing. You nest these widgets inside each other to create complex layouts.

• Column(children: []): Arranges children vertically.
• Row(children: []): Arranges children horizontally.
• Container(child: widget): Adds padding, margin, color, or size.

dart

Column(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Output

A vertical list of three text items: Item 1, Item 2, Item 3

Example

This example shows a simple screen with a vertical layout using Column, some padding with Container, and a button at the bottom.

dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Layout Example')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              padding: EdgeInsets.all(20),
              color: Colors.blue[100],
              child: Text('Hello, Flutter!', style: TextStyle(fontSize: 24)),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('Press Me'),
            ),
          ],
        ),
      ),
    );
  }
}

Output

A screen with a blue box containing 'Hello, Flutter!' text centered vertically and a button labeled 'Press Me' below it.

Common Pitfalls

Beginners often forget to use Expanded or Flexible inside Row or Column, causing layout overflow errors. Another common mistake is not wrapping widgets in SingleChildScrollView when content might exceed screen size, leading to render errors.

Also, avoid using fixed sizes without considering different screen sizes; use padding and flexible widgets instead.

dart

/* Wrong: Causes overflow error */
Row(
  children: [
    Container(width: 300, color: Colors.red),
    Container(width: 300, color: Colors.green),
  ],
)

/* Right: Use Expanded to share space */
Row(
  children: [
    Expanded(child: Container(color: Colors.red)),
    Expanded(child: Container(color: Colors.green)),
  ],
)

Output

Wrong: Red and green boxes overflow horizontally.
Right: Red and green boxes share horizontal space equally.

Quick Reference

Here are some key layout widgets in Flutter:

Widget	Purpose
Column	Arrange children vertically
Row	Arrange children horizontally
Container	Add padding, margin, color, size
Expanded	Make child fill available space
SizedBox	Add fixed space or size
SingleChildScrollView	Make content scrollable

Key Takeaways

Use Column and Row widgets to arrange UI elements vertically and horizontally.

Wrap widgets with Container to add padding, margin, or background color.

Use Expanded or Flexible inside Row/Column to avoid overflow errors.

Wrap content in SingleChildScrollView if it might exceed screen size.

Test layouts on different screen sizes for responsiveness.