Widget City · Module 6

Decoration & Style

BoxDecoration transforms a plain Container into a polished card with colors, borders, and shadows. ClipRRect clips children to rounded shapes, and Theme provides consistent colors across your whole app.
This is the final Widget City module. Complete all 4 games to finish the curriculum!

Style toolkit

BoxDecoration

BoxDecoration(color: ..., borderRadius: ...)

Adds color, rounded corners, border, and shadow to a Container.

ClipRRect

ClipRRect(borderRadius: ..., child: ...)

Clips child content (like images) to a rounded rectangle.

Theme

Theme.of(context).colorScheme.primary

Accesses app-wide consistent colors from the theme.

Progress

0 / 4 mini-games solved

Stage 1

Box Decorator

Pick color, borderRadius, and shadow for a card.

Mix color, radius, and shadow properties. Explore at least 4 combinations to complete.

color

borderRadius

boxShadow

Explored: 0 / 4

Live preview

Card

Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(0),
    boxShadow: [
      BoxShadow(
        blurRadius: 0,
        color: Colors.black26,
      )
    ],
  ),
)

← Stack & Position