Skip to content

Widgets & UI — Module Overview

In React, your UI is a tree of components. In Flutter, your UI is a tree of widgets. That is the single most important mental shift: every visual element, every layout helper, even padding and spacing, is a widget you compose into a tree.

There is no HTML, no CSS, no stylesheet, no DOM. Everything — text, buttons, images, columns, padding, themes — is a Dart object that participates in the same widget tree. If you can build a React component tree, you can build a Flutter widget tree.

What this module covers

Lesson	React analogy
Stateless Widget	Function component returning JSX
Props & Constructors	Props / component arguments
Layout: Row & Column	Flexbox (`display: flex`)
Containers & Padding	CSS box model
Core Widgets	`<p>`, `<img>`, `<button>`, `<ul>`
Styling & Theme	CSS / styled-components / ThemeProvider

Below is the Flutter equivalent of a React “Hello, World” function component. Paste it into DartPad and run it — you will see a centered blue card with white text.

Flutter / DartOpen in DartPad ↗ (copies code)

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[100],
        body: Center(
          child: Container(
            padding: const EdgeInsets.all(24),
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(12),
            ),
            child: const Text(
              'Hello, Flutter!',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}