Meet Flutter and the project

Flutter is an open source UI toolkit from Google. You write your app in Dart, and Flutter draws every pixel itself using its own rendering engine instead of wrapping the platform's native buttons and lists. That is why a Flutter app looks the same on Android and iOS unless you choose otherwise, and why it can run on the web and desktop from the same code.

The other thing that makes Flutter pleasant is hot reload. When you save a file, the change appears in the running app in about a second, while keeping the current screen and state. You will use this constantly to try small adjustments.

What we are building

Streak is a habit tracker with four screens:

1. A home list of habits with today's check in status
2. A form to create or edit a habit
3. A detail screen with a calendar of past check ins
4. A stats screen with simple totals

Along the way we will add a daily reminder, local storage and a tiny backend sync. The design uses standard Material 3 components so we do not get lost in styling.

Everything is a widget

In Flutter, buttons, text and images are widgets, but so are padding, alignment and layout. A screen is a tree of widgets nested inside each other. For example, centred text is a Text widget inside a Center widget. This feels verbose at first, but it means there are very few special cases to learn. Once you understand how a few layout widgets behave, you can build almost any screen.

How this course works

Each section starts with a short explanation, then we write code together. Every lesson has a matching branch in the course repository, so you can always compare or reset. If you have never programmed before, take the Dart lessons slowly and type every example yourself. If you know another language, you will find Dart familiar: it borrows from Java, JavaScript and Kotlin.

In the next lesson we install Flutter and run the default app on an emulator.