Flutter Tutorial

Getting Started with Flutter Dart Language Basics Widgets: Stateless vs Stateful Layout: Row, Column, Container & more Navigation & Routing State Management (setState, Provider, Riverpod) Networking with http / Dio JSON & Models Local Storage (shared_preferences & sqflite) Forms & Validation Animations Firebase Integration Building & Publishing Flutter Apps

Layout: Row, Column, Container & more

June 02, 2026 • 1 min read

Flutter layout is built by nesting widgets. The workhorses are Column (vertical), Row (horizontal), Container (box with padding/decoration) and Stack (overlap).

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Title', style: TextStyle(fontSize: 22)),
    SizedBox(height: 8),
    Row(
      children: [
        Icon(Icons.star, color: Colors.amber),
        SizedBox(width: 4),
        Text('4.8'),
        Spacer(),                 // pushes price to the right
        Text('\u{20B9}499'),
      ],
    ),
  ],
)
  • Expanded / Flexible share leftover space.
  • Padding and SizedBox add spacing.
  • Container adds color, borders, rounded corners, margins.
Tip: Wrap content that might overflow in SingleChildScrollView to avoid the yellow/black overflow stripes.

Summary

Compose layouts by nesting Column/Row/Container/Stack and control space with Expanded, Padding and SizedBox.