iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Layout (Row / Column)

By · Reviewed & last updated · Part of Flutter Tutorial

Layout in Flutter is composition of Row, Column, Stack, Expanded, Flexible, SizedBox. Everything is sized by constraints flowing down, sizes flowing back up.

Common layout patterns

EXAMPLE
import 'package:flutter/material.dart';

class DashboardCard extends StatelessWidget {
    const DashboardCard({super.key});

    @override
    Widget build(BuildContext context) {
        return Card(
            margin: const EdgeInsets.all(8),
            child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                        // Header — image + title share a row
                        Row(
                            children: const [
                                CircleAvatar(child: Text('A')),
                                SizedBox(width: 12),
                                Expanded(
                                    child: Text('Dashboard',
                                        style: TextStyle(fontWeight: FontWeight.bold)),
                                ),
                                Icon(Icons.more_vert),
                            ],
                        ),
                        const SizedBox(height: 16),

                        // Body — three flexible cells with gaps
                        Row(
                            children: const [
                                _Metric(title: 'Users',  value: '1,234'),
                                SizedBox(width: 12),
                                _Metric(title: 'Revenue', value: '\$12k'),
                                SizedBox(width: 12),
                                _Metric(title: 'Errors', value: '3'),
                            ],
                        ),

                        const SizedBox(height: 16),

                        // Footer — buttons aligned right
                        Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                                TextButton(onPressed: () {}, child: const Text('Cancel')),
                                const SizedBox(width: 8),
                                FilledButton(onPressed: () {}, child: const Text('Save')),
                            ],
                        ),
                    ],
                ),
            ),
        );
    }
}

class _Metric extends StatelessWidget {
    const _Metric({required this.title, required this.value});
    final String title, value;

    @override
    Widget build(BuildContext context) {
        return Expanded(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                    Text(title, style: const TextStyle(color: Colors.grey)),
                    const SizedBox(height: 4),
                    Text(value, style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                ],
            ),
        );
    }
}

Why it matters

“Constraints go down, sizes go up” is the most important sentence in Flutter. When a layout misbehaves, ask: what constraint is the parent passing me? what size am I returning?

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: const [
        Text('left'),
        Text('right'),
    ],
)

Column(
    children: const [
        Text('top'),
        Text('bottom'),
    ],
)
Try it Yourself »

Exercise

Horizontal layout widget.

(children: const [Text('a'), Text('b')])

Discussion

Loading…