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
-
1Setup, proven on a phoneGet 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.
-
2Dart warm-upIn 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.
-
3The screen, extractedA 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.
-
4Attendance, liveA 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.
-
5Fetch, every state, and rememberFetch 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.
-
6Ship it, live with itFold 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
| Criterion | Points |
|---|---|
| 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 |
صورتحال
ایک tuition teacher کاغذ پر حاضری لگاتا ہے اور sheet کھو دیتا ہے۔ وہ app بنائیں جو اس کی جگہ لے — students شامل کریں، present یا absent نشان لگائیں، گنتی کو live بدلتے دیکھیں، ہر state سنبھالتے ہوئے API سے کلاس کی فہرست fetch کریں، آخری دیکھی ہوئی چیز یاد رکھیں — پھر signed release بنائیں، اپنے phone پر install کریں، اور ایک ہفتہ استعمال کریں۔ حقیقی phone پر ایک مکمل app تین آدھی چھوڑی ہوئی tutorials سے بہتر ہے۔
آپ کیا دکھا سکیں گے
- Flutter کا ماحول حقیقی device پر چلانا، صرف emulator پر نہیں
- widgets نکالنا اور state سنبھالنا تاکہ code پڑھنے کے قابل رہے
- loading، error اور data سنبھالتے ہوئے FutureBuilder سے fetch کرنا
- signed APK بنانا اور ایک ہفتہ اس کے ساتھ رہنا
آپ کو کیا چاہیے
- flutter doctor صاف کے ساتھ Flutter SDK، USB debugging والا Android phone
- Dart کی مشق کے لیے dartpad.dev
- jsonplaceholder کا users endpoint، shared_preferences
کام
-
1setup، phone پر ثابتflutter doctor کو کوئی error نہ دکھانے تک لائیں۔ default app emulator پر اور USB سے اپنے phone پر چلائیں۔ counter کا step 5 کریں اور تصدیق کریں کہ hot reload چلتی app کو update کرتا ہے۔ نوٹ کریں کہ setup میں کتنا وقت لگا۔درست نتیجہ: phone پر چلتی app، hot-reload کی تبدیلی نظر آتی ہو، اور setup کا وقت درج ہو۔
-
2Dart کی مشقdartpad میں: name، fee due اور fee paid والی Student class؛ ایک balance() method؛ پانچ کی list؛ ہر ایک کو status کے ساتھ print کرنے والا loop؛ ?? سے سنبھالا ہوا nullable field؛ ایک async function جو ایک سیکنڈ رک کر string واپس کرے۔درست نتیجہ: dartpad کا output جس میں چھوں چیزیں کام کرتی ہوں۔
-
3screen، نکالی ہوئیapp bar والا Scaffold، تین student cards کا Column، نیچے ایک button۔ card کو اس کی اپنی StatelessWidget میں نکالیں جو name، fee اور status لے، اور تین بار استعمال کریں۔درست نتیجہ: اپنی file میں StudentCard widget جو تین بار استعمال ہو۔
-
4حاضری، liveنام شامل کرنے کے لیے TextField، ایک button جو اسے state میں list میں ڈالے، ہر قطار پر Present/Absent toggle والا ListView.builder، حاضر students کی live گنتی، اور ہر قطار پر delete۔ controller کو dispose کریں۔درست نتیجہ: شامل کرنا، toggle، delete اور live گنتی سب کام کریں؛ dispose() موجود ہو۔
-
5fetch، ہر state، اور یاد رکھناFutureBuilder سے jsonplaceholder users fetch کریں، loading، error اور data سنبھالتے ہوئے — error دیکھنے کے لیے wifi بند کریں۔ user پر tap کرنے سے detail screen کھلے۔ fromJson والی User model میں parse کریں۔ آخری دیکھے گئے user کا نام shared_preferences سے محفوظ رکھیں۔درست نتیجہ: تینوں states دیکھی گئیں؛ ایک detail screen؛ restart کے بعد آخری نام دوبارہ نظر آئے۔
-
6بھیجیں، اس کے ساتھ رہیںfetch اور storage کو attendance app میں شامل کریں۔ signed release APK بنائیں، اپنے phone پر install کریں، ایک ہفتہ استعمال کریں، جو تنگ کرے ٹھیک کریں۔ README اور screenshots کے ساتھ GitHub پر push کریں۔درست نتیجہ: آپ کے phone پر APK، README اور screenshots والا repo، اور استعمال کے بعد ٹھیک کی گئی چیزوں کی فہرست۔
کیا جمع کروانا ہے
repo کا URL، APK (یا install شدہ کا screenshot)، dartpad کا link، اور ہفتے کی fix کی فہرست۔
نمبر کیسے ملیں گے
| معیار | نمبر |
|---|---|
| ماحول حقیقی phone پر کام کرتا ہے، hot reload ثابت | 10 |
| Dart کی مشق مکمل | 10 |
| widgets نکالے اور دوبارہ استعمال ہوئے | 15 |
| حاضری کی state، live گنتی اور dispose درست | 25 |
| fetch تینوں states سنبھالتا ہے، model parse ہوا، preference محفوظ | 25 |
| signed APK install، استعمال، ٹھیک اور شائع ہوا | 15 |
| کل · پاس 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 IDAlready have one? Sign in and this course will be added to it.