Flutter Basics · Course lab · about 300 minutes · 6 tasks · marked out of 100, pass at 60

One attendance app, finished, on your own phone

The situation

A tuition teacher takes attendance on paper and loses the sheet. Build the app that replaces it — add students, mark present or absent, see the count update live, fetch a class list from an API with every state handled, remember the last thing viewed — then build a signed release, install it on your own phone, and use it for a week. A finished app on a real phone beats three half-completed tutorials.

What you'll be able to show

  • Get a Flutter environment working on a real device, not only an emulator
  • Extract widgets and manage state so the code stays readable
  • Fetch with FutureBuilder handling loading, error and data
  • Ship a signed APK and live with it for a week

What you need

  • Flutter SDK with flutter doctor clean, an Android phone with USB debugging
  • dartpad.dev for the Dart warm-up
  • jsonplaceholder's users endpoint, shared_preferences

Tasks

  1. 1Setup, proven on a phone
    Get flutter doctor to show no errors. Run the default app on an emulator AND on your own phone over USB. Change the counter's step to 5 and confirm hot reload updates the running app. Note how long setup took.
    A correct result: The app running on the phone, a hot-reload change visible, and the setup time recorded.
  2. 2Dart warm-up
    In dartpad: a Student class with name, fee due and fee paid; a balance() method; a list of five; a loop printing each with a status; a nullable field handled with ??; one async function that waits a second and returns a string.
    A correct result: The dartpad output showing all six pieces working.
  3. 3The screen, extracted
    A Scaffold with an app bar, a Column of three student cards, a button at the bottom. Extract the card into its own StatelessWidget taking name, fee and status, and use it three times.
    A correct result: A StudentCard widget in its own file used three times.
  4. 4Attendance, live
    A TextField to add a name, a button that adds it to a list in state, a ListView.builder with a Present/Absent toggle per row, a live count of present students, and delete per row. Dispose the controller.
    A correct result: Adding, toggling, deleting and the live count all work; dispose() is present.
  5. 5Fetch, every state, and remember
    Fetch jsonplaceholder users with FutureBuilder, handling loading, error and data — turn wifi off to see the error. Tapping a user pushes a detail screen. Parse into a User model with fromJson. Persist the last-viewed user's name with shared_preferences.
    A correct result: All three states seen; a detail screen; the last name shown again after a restart.
  6. 6Ship it, live with it
    Fold the fetch and storage into the attendance app. Build a signed release APK, install it on your phone, use it for a week, fix what annoys you. Push to GitHub with a README and screenshots.
    A correct result: The APK on your phone, a repo with README and screenshots, and a list of what you fixed after using it.

What to hand in

The repo URL, the APK (or a screenshot of it installed), the dartpad link, and the week's fix list.

How it is marked

CriterionPoints
Environment works on a real phone with hot reload proven 10
Dart warm-up complete 10
Widgets extracted and reused 15
Attendance state, live count and disposal correct 25
Fetch handles all three states, model parsed, preference persisted 25
Signed APK installed, used, fixed and published 15
Total · pass at 60 100

Hand in your lab

Create a free BvLogic ID to hand in your lab, get it marked, and have it on your certificate.

Create your BvLogic ID

Already have one? Sign in and this course will be added to it.