Flutter Course 01 / 16
↑↓ or scroll to move between slides

Mobile App Development · Fall 2026

Learn Flutter
by building apps

Every lecture, video, project and grade in one place. Open the slides, watch the short videos, then build.

MI
Monther IbrahimInstructor
Start here Monther-bug Widget of the Day
0lectures
0projects
0marks
Scroll

The journey

8 lectures so far

From "what is Flutter?" to a complete login page. Pick a lecture to see its details, code and videos.

Grades

How the 100 marks work

Every mark comes from building real apps: four projects, a midterm project and a final project.

Example design for Project 1: a profile card app
PROJECT 15 MARKSLECTURES 1–4

Profile Card

A one-screen app that shows a card about you, using only MaterialApp, Scaffold, AppBar, Center, Container and Text.

  • A new project called profile_card, DEBUG banner hidden
  • An AppBar with your name and your own colors
  • A centered Container: width, padding, color, rounded corners
  • Your name, major, university and one line about you
  • Text styled with TextStyle and centered
  • No red errors; code formatted (Shift + Alt + F)
How it is marked
AppBar: title and custom colors1
The card: size, padding, color, rounded corners1.5
Text: all the information, styled and centered1.5
Clean code that runs with no errors0.5
Submitted correctly on GitHub0.5
Total5

⭐ Want to impress? Add a border, use Column & Row, or your photo in a CircleAvatar.

Example design for Project 2: a login page
PROJECT 28 MARKSLECTURES 5–8

Login Page

A complete login screen with your own design that keeps working when the keyboard is open.

  • login_page project; LoginPage is its own widget
  • SafeArea + SingleChildScrollView + Padding + Column
  • A logo from assets (Image.asset), title and subtitle
  • Email field and password field with icons
  • "Forgot password?" + full-width Login button with a SnackBar
  • "Sign up" row, and no overflow with the keyboard open
How it is marked
Layout structure (SafeArea, scroll view, padding, column)2
Logo from assets, title and subtitle1
Email and password fields with all the details2
Buttons: Forgot password, Login + SnackBar, Sign up row1.5
Design quality: spacing, colors, no overflow1
Submitted correctly on GitHub0.5
Total8

⭐ Want to impress? A tappable logo, an AlertDialog for "Forgot password?", or a "Remember me" row.

Later this semester

More projects are coming

Each one gets its own requirements when we get there.

Project 310marksComing soon
Project 412marksComing soon
Midterm project25marksComing soon
Final project40marksComing soon

Submit

How to submit on GitHub

The same three steps for every project.

Create a private repo

  1. Sign in at github.com
  2. Click + → New repository
  3. Name it like the project, choose Private

Push your project

In a terminal inside your project folder:

$ git init
$ git add .
$ git commit -m "first version"
$ git branch -M main
$ git remote add origin <repo URL>
$ git push -u origin main

Invite the instructor

  1. Repo → Settings → Collaborators
  2. Add people → Monther-bug
  3. Send the repo link in the class group

Keep learning

Happy coding!

▶ Widget of the DayShort videos, one widget each Install FlutterThe official download page Material iconsFind any Icons. name

Mobile App Development with Flutter · Fall 2026 · Monther Ibrahim · github.com/Monther-bug