You already know Dart.

7 days of variables, functions, classes, async. That's the language. Now we add the toolkit.

Flutter is a UI toolkit on top of Dart.

Dart runs the logic. Flutter draws the screen.

Everything is a widget.

Text? Widget. Button? Widget. Padding? Widget. Even the screen itself? Widget. They nest inside each other like LEGO.

If you wonder "is this a widget?" — yes.

Make a project: flutter create

One command. Done. Flutter writes ~30 files for you.

Folder tour

Don't panic. You'll mostly live in lib/.

main.dart — the start line

Like every Dart program, Flutter starts at main(). Inside, one magic line: runApp(...).

Two flavors: Material vs Cupertino

The wrapper that gives your app its look. Pick one based on the platform you want to feel native on.

MaterialApp — the default

Most Flutter apps use this. Bold colors, raised buttons, hamburger menus. Looks at home on Android.

CupertinoApp — the iOS feel

Soft corners, gentle blur, sliding screens. Feels native on iPhone. Optional — only use if your app is iOS-first.

Which one for you?

90% of beginners go with MaterialApp. We will too.

Apps are trees of widgets.

A parent widget holds children. Children hold their own children. Goes deep.

The build() method

Every widget has a build(). Inside, it returns more widgets. That's how the tree grows.

BuildContext — "where am I?"

Every widget gets a context. It's a handle that says "here's your spot in the tree." Use it to find parents, themes, screen size.

Don't memorize. You'll just keep typing context and Flutter figures it out.

Code → pixels in 4 steps

Simple version. Skip the engine internals.

Show stuff: Text, Icon, Image

Display-only widgets. They show, they don't react.

Shape & spacing: Container, SizedBox, Padding

Boxes that wrap other widgets to give them size, color, or breathing room.

Buttons that do stuff

Three flavors. Pick by how loud you want them to be.

Row & Column — the workhorses

90% of layouts are these two. Row = side by side. Column = top to bottom.

Stack — pile widgets on top

When you want one widget on top of another. Like a badge on an avatar, or text over an image.

Expanded — "take what's left"

Inside Row or Column, wrap a child in Expanded to fill remaining space.

Alignment — where children sit

mainAxisAlignment = along the row/column. crossAxisAlignment = the other way.

Your first widget: StatelessWidget

Make your own widget by extending StatelessWidget and giving it a build(). That's it.

Make it reusable — pass data in

Add a constructor parameter. Now the same widget can show different text.

Compose small → big

Build tiny widgets. Combine them into bigger ones. That's the whole game.

3 small widgets = 1 reusable card. Now drop UserCard anywhere in your app.

Stateless vs Stateful

Two kinds of widgets. The difference: can it change after it's drawn?

Stateful = widget + state object

Stateful widgets come in two parts. The widget itself + a State class that holds the changing data.

setState() — "redraw me!"

When data changes, call setState. Flutter redraws the widget with new values.

The classic counter

Click the button. Watch the number change. That's setState in action.

In real Flutter: same thing, but inside setState(() { count++; }).

Toggle — UI changes shape

Same idea. Different boolean. UI swaps based on state.

The #1 beginner mistake

You change the data. UI doesn't update. You wonder why.

From sketch → real UI

A designer hands you this sketch. Your job: turn it into Flutter widgets.

Break it into widgets

Look at the sketch. Name each piece. That's your widget tree.

Container holds Row. Row holds Avatar + Column + Button. Done.

Final result

Same widgets. Real colors. Real text. Real Flutter.

🎉 You just built UI from a wireframe.

Today you learned

Build it yourself.

Practice beats theory. Open DartPad or your editor and ship.