←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?
Keep this in mind

Widget City covers the core Flutter widget families: layout (Container, Row, Column), content (Text, Icon), spacing (SizedBox, Padding, Expanded), layering (Stack, Positioned, Align), and decoration (BoxDecoration, ClipRRect, Theme). Each module builds on the last.

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 →