Flight with Flutter: Chapter 2 – Widgets and Layouts

Every flight needs wings—and in Flutter, those wings are widgets. From text to images, from buttons to the entire app structure, everything you see on screen is built with widgets. This principle is what makes Flutter flexible, composable, and developer-friendly.

Everything Is a Widget

Widgets are the fundamental units of a Flutter app. They define structure, styling, and behavior. There are two main types:

• StatelessWidget: For UI that doesn’t change over time.
• StatefulWidget: For UI that updates based on user interaction or data.

Core Layout Widgets

Flutter provides powerful layout widgets to control spacing, alignment, and composition. The most commonly used are:

• Container: Like a <div> in HTML, for styling, padding, margins, and background.
• Row and Column:
  • Row: Places widgets horizontally.
  • Column: Places widgets vertically.
• Stack: Overlaps widgets, similar to absolute positioning.
• Center: Aligns its child widget to the center.
• Padding & SizedBox: Add spacing around or between widgets.

Building a Simple Profile Card

Let’s create a minimal profile card to demonstrate how widgets and layouts come together:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[200],
        body: Center(
          child: Container(
            width: 300,
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(16),
              boxShadow: [
                BoxShadow(
                  color: Colors.black12,
                  blurRadius: 10,
                  spreadRadius: 1,
                ),
              ],
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const CircleAvatar(
                  radius: 40,
                  backgroundImage: NetworkImage('https://i.pravatar.cc/150?img=8'),
                ),
                const SizedBox(height: 16),
                const Text(
                  'Jane Doe',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 8),
                const Text(
                  'Flutter Developer',
                  style: TextStyle(fontSize: 16, color: Colors.grey),
                ),
                const SizedBox(height: 12),
                ElevatedButton(
                  onPressed: () {},
                  child: const Text('Follow'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

How This Works

• Scaffold: Provides the page structure, including AppBar and other elements.
• Container: Handles spacing and styling with padding, borders, and background.
• Column: Vertically stacks the profile elements.
• CircleAvatar: Displays a circular profile image.
• SizedBox: Adds vertical space between items.
• Text: Renders the name and role.
• ElevatedButton: Creates a Material-style button.

Widget Tree Visualization

The code builds a widget tree like this:

MyApp
 └─ MaterialApp
     └─ Scaffold
         └─ Center
             └─ Container
                 └─ Column
                     ├─ CircleAvatar
                     ├─ SizedBox
                     ├─ Text (name)
                     ├─ SizedBox
                     ├─ Text (role)
                     ├─ SizedBox
                     └─ ElevatedButton

Key Takeaways

• Widgets are composable—combine small pieces to build complex UIs.
• Layouts are flexible—Row, Column, Stack, and Container cover most use cases.
• StatelessWidget is ideal for static UIs, while StatefulWidget handles dynamic updates.

Next Up: State Management in Flutter

In Chapter 3 of Flight with Flutter, we’ll tackle one of the most important topics in app development—state management. From simple setState to advanced solutions like Provider and Riverpod, you’ll learn how to keep your app’s data and UI perfectly in sync.