←World Map
🏙️ Widget CityWorld 2
State Kingdom→
Widget City — Learn Flutter Widgets by Playing
6 Interactive Modules • Live Builder

Widget City

Flutter UI is built from widgets. In Widget City you learn how Container, Row, Column, Text, Icon, SizedBox, Stack, and BoxDecoration work together through 6 game-based modules — ending in a live widget builder that generates real Dart code.

6 Modules
Interactive Builder
No Install Needed
Curriculum Modules
1
Module 1

Layout Lab

See how Container, Row, and Column shape every Flutter screen.

Container · Row · Column
8 mini-games
Start
2
Module 2

Text & Icons

Add words, labels, and symbols with Text and Icon widgets.

Text · Icon · TextStyle
6 mini-games
Start
3
Module 3

Widget Builder

Build a real widget tree and generate Dart code live.

Container · Row · Column · Text · Icon
Sandbox builder
Start
4
Module 4NEW

Spacing & Size

Control gaps, padding, and flexible sizing between widgets.

SizedBox · Padding · Expanded
6 mini-games
Start
5
Module 5NEW

Stack & Position

Layer widgets on top of each other for badges, overlays, and floats.

Stack · Positioned · Align
5 mini-games
Start
6
Module 6NEW

Decoration & Style

Make your containers beautiful with colors, shadows, and rounded corners.

BoxDecoration · ClipRRect · Theme
4 mini-games
Start
Builder on the side
Builder playground

Build the widget tree step by step and watch the preview update in real time.

Learn by example

This builder is your sandbox. Start simple, connect widgets together, and watch the preview change as your tree grows.

Widget tree
Properties (Container)
Padding:
Border Radius:
Color:
Live preview
Container
empty
Tip: place a Row or Column inside a Container to arrange several widgets together.
Quick challenge

Which widget would you add if you want to place several children in a vertical stack?

Daily challenges

Quick one-shot puzzles to sharpen your widget knowledge. No progression needed — just play.

Daily challenge

Text Match

Tap the widget that displays words on the screen.

Which widget would you use to show a label?
Daily challenge

Column Quest

Choose the widget that stacks children from top to bottom.

Which widget arranges children vertically?
Daily challenge

Space Builder

Find the widget that creates room between elements.

Which widget adds empty space between two widgets?
Core Concept Guide

Understanding the Flutter Widget Tree & Layout System

What is a Widget Tree in Flutter?

In Flutter, everything is a widget. From structural elements like Scaffold and Container to visible content like Text and Icon. The Widget Tree is a hierarchical parent-child structure that defines how UI components compose together.

When you build a screen in Flutter, you construct a tree of nested widgets. Flutter's rendering engine (Impeller) walks this tree to calculate constraints, compute sizes, and paint pixels directly onto the screen.

Layout Widgets: Row, Column, & Container

  • • Row: Lays out child widgets horizontally in a line. Controls main-axis (horizontal) and cross-axis (vertical) alignment.
  • • Column: Stacks child widgets vertically. Ideal for building forms, lists, and stacked layout sections.
  • • Container: A versatile box widget combining padding, margins, borders, background colors (BoxDecoration), and sizing constraints.

Key Takeaways for Beginners

1. Composition over Inheritance

Flutter builds complex UIs by combining small, single-purpose widgets rather than extending large UI classes.

2. Constraints Go Down

Parents pass layout constraints (min/max width and height) down to children. Children choose their own size within constraints.

3. Sizes Go Up

Children pass their computed size back up to parents, allowing the parent to position them on screen.

Complete Widget City to unlock State Kingdom

Start with Module 1 — Layout Lab

Master how Container, Row, and Column shape every single screen in Flutter. Play in 5 minutes.

Begin Module 1Skip to State Kingdom →