Lab · Flutter and Dart
Lab: your first Flutter app, Chai Shop
The brief
Set up Flutter until flutter doctor is happy, create the Chai Shop app, build a reusable menu card, add a stateful cup counter that shows the day's sales, and finish with flutter analyze reporting no issues.
Why it matters
This is day one of every Flutter job and freelance project: a working toolchain, a new project, small reusable widgets and a bit of state. Being able to read flutter doctor, use hot reload and log with debugPrint saves hours on every app you build later.
Skills you practise
- flutter doctor
- flutter create and flutter run
- hot reload and hot restart
- MaterialApp, Scaffold, Card and ListTile
- StatelessWidget with a VoidCallback
- StatefulWidget and setState
- debugPrint
- flutter analyze
You need
- Flutter 3.24 or newer (stable channel), installed by the official guide at docs.flutter.dev
- Android Studio with the Android SDK and an emulator, or an Android phone with USB debugging on
- VS Code with the Flutter extension, or Android Studio with the Flutter plugin
What you will have at the end
The chai_shop Flutter app running on a device: two reusable menu cards that log orders, a stateful cup counter with sales in rupees, and a project that passes flutter analyze.
How it is marked (rubric, 100 points)
| Working setupflutter doctor shows ticks for Flutter, the Android toolchain and a connected device; the project runs. | 20 |
|---|---|
| Widgets built wellMenuItemCard is a small reusable StatelessWidget with a VoidCallback; const used where possible; the screen is built from small widgets. | 35 |
| State handled correctlyThe counter uses setState, sales are computed from the state, and minus is disabled at 0. | 30 |
| Clean projectflutter analyze reports no issues, and the old template test is fixed or removed. | 15 |
0/5 steps done
Step 1 of 5
A healthy flutter doctor
flutter doctor shows ticks for Flutter and the Android toolchain, and finds a connected device.
flutter doctor checks your setup and tells you how to fix each problem. You need ticks for Flutter and the Android toolchain, and at least one connected device (an emulator started from Android Studio's Device Manager, or your phone with USB debugging on). The most common warning is about Android licences: run flutter doctor --android-licenses and answer y to each.
A cross for Visual Studio only matters if you build Windows desktop apps, and Xcode only exists on a Mac, so you can ignore those for this course. On Windows the ticks may print as √ instead of ✓.
$ flutter doctorAlso check yourself
Your notes: lib/main.dart
Write down each command you ran. It goes into your project summary.