📲Course Curriculum

Mobile Apps with Flutter

App Development· Intermediate· Ages 15–17· 20 Hours

Course At a Glance

Program Outcomes

By the end of this course, students will be able to:

1
Understand the basics of developing applications with Flutter and the Dart programming language.
2
Modify and customise components and layouts to create polished, multi-screen app interfaces.
3
Build simple Flutter apps that can be compiled and run across mobile, web, and desktop platforms.

Module 1

Introduction to Flutter & Dart

Students are introduced to Flutter as a cross-platform development framework and learn Dart. Topics cover environment setup, Dart syntax, OOP, and the first Flutter widgets.

Approx. 5 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Widgets / Concepts
1.1	What is Flutter & Why Use It?	Understand Flutter's cross-platform architecture (compile to mobile/web/desktop) and widget-based UI model. Compare to React Native.	Exploration: Browse the Flutter showcase. Identify 3 real-world Flutter apps and list their UI features.	`Flutter, Dart, widget tree, cross-platform, SDK`
1.2	Environment Setup & First Run	Install Flutter SDK, configure VS Code, and use flutter doctor. Run the default counter app on an emulator.	Setup Lab: Run flutter doctor. Create 'hello_flutter' project. Run on emulator and explore the lib/main.dart file.	`flutter create, flutter run, pubspec.yaml, lib/main.dart`
1.3	Dart Fundamentals: Variables & Types	Learn Dart's statically typed syntax: var, final, const, basic data types (List, Map), string interpolation, and null safety.	Dart Exercises: Write 10 snippets in DartPad (dartpad.dev) using typed variables and string interpolation.	`var, final, const, int, String, List<T>, Map<K,V>, $var, ?type`
1.4	Dart Fundamentals: Functions & Control Flow	Write typed functions, arrow functions (=>), if/else logic, loops, and switch statements. Compare to Python.	Build in DartPad: Write gradeCalculator() function and loop over a List of names printing a greeting.	`void func(Type param), =>, if/else, for (var x in list), switch`
1.5	Dart Classes & Object-Oriented Programming	Define classes with properties, methods, and named constructors. Learn shorthand constructor syntax and inheritance.	Build: Define a Student class in DartPad. Create objects and call methods. Create a subclass using extends.	`class, constructor, this., get, extends, @override`
1.6	Your First Flutter Widget	Understand the widget tree. Distinguish StatelessWidget from StatefulWidget. Explore MaterialApp and Scaffold.	Build: Replace the default app with a 'Welcome Screen' (Scaffold, AppBar, Column, Text) from scratch.	`StatelessWidget, build(), MaterialApp, Scaffold, AppBar, Column, Text`
1.7	Core Widgets: Text, Image & Icon	Style Text with TextStyle. Add images (asset/network) and Icons. Declare local assets in pubspec.yaml.	Build: 'Profile Card Screen' — Avatar image, bold styled name, grey subtitle, and an icon row.	`TextStyle, Image.asset, Image.network, Icon, SizedBox, pubspec.yaml assets:`
1.8	Module 1 Review & Mini App	Consolidate Dart OOP, stateless widgets, and hot reload workflow by building a polished single-screen app.	Mini App: 'Personal Bio Card' — a polished Card widget displaying student data passed from a Dart class.	`Full Module 1 — Dart + Flutter core widgets, Card, hot reload`

Module 2

Layouts, Components & Navigation

Students build multi-screen apps by mastering layout widgets, Container styling, scrollable lists, user input components, app-wide theming, and screen-to-screen navigation.

Approx. 5 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Widgets / Concepts
2.1	Layout Widgets: Column, Row & Stack	Master Column (vertical), Row (horizontal), and Stack (layered) widgets. Control alignment with axis alignment properties.	Layout Workshop: Build 3 separate screens demonstrating Column, Row spacing, and Stack text overlays.	`Column, Row, Stack, Positioned, Expanded, mainAxisAlignment, crossAxisAlignment`
2.2	Container, Padding & Decoration	Use Container for precise sizing and styling via BoxDecoration (gradients, borders, shadows). Apply Padding.	Build: 'Styled Card Gallery' — 3 cards styled with gradients, rounded corners, and box shadows.	`Container, BoxDecoration, BorderRadius, margin, padding, gradient`
2.3	ListView & GridView	Display scrollable lists with ListView.builder and GridView.count. Use ListTiles for standard list rows.	Build: 'App Menu Screen' — a GridView of icon tiles, replaced by a ListView.builder of 20 items.	`ListView.builder, GridView.count, itemBuilder, itemCount, ListTile`
2.4	Buttons & User Input Widgets	Use ElevatedButton, TextButton, and FloatingActionButton. Accept input using TextField and TextEditingController.	Build: 'Interactive Form Screen' — capture name/email with TextFields and a styled submit button.	`ElevatedButton, TextButton, FloatingActionButton, TextField, TextEditingController, InputDecoration`
2.5	Themes & Custom Styling	Define app-wide themes with ThemeData (primary colour, text styles). Switch between light and dark themes.	Theming Sprint: Apply a custom ThemeData to the Bio Card app. Add a light/dark theme toggle.	`ThemeData, primarySwatch, textTheme, ColorScheme, Theme.of(context)`
2.6	Navigation & Multiple Screens	Navigate using Navigator.push() and .pop(). Pass data between screens. Understand named routes.	Build: 'Two-Screen App' — a Home list where tapping an item passes its data to a Detail screen.	`Navigator.push(), MaterialPageRoute, Navigator.pop(), context, named routes`
2.7	Responsive Layouts & MediaQuery	Adapt layouts using MediaQuery and LayoutBuilder. Handle constraints for phone vs. tablet/web displays.	Responsive Challenge: Build a layout that shows a GridView on web/tablet and a ListView on phones.	`MediaQuery.of(context).size, LayoutBuilder, constraints.maxWidth, Flexible`
2.8	Module 2 Project: UI App	Combine layout and navigation skills to build a polished, themed, multi-screen app without logic.	Project: 'Recipe Book App' — Home GridView routing to Recipe Detail screens. Fully themed and styled.	`Full Module 2 — layouts, navigation, theme`

Module 3

Interactivity, State & Data

Students bring apps to life with StatefulWidget, handle gestures, build validated forms, manage dynamic lists, write async code, fetch API data, and persist data with SharedPreferences.

Approx. 5 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Widgets / Concepts
3.1	StatefulWidget & setState()	Understand reactive UI. Convert stateless widgets to stateful. Trigger UI rebuilds using setState().	Build: 'Like Button' — a heart icon that toggles filled/outlined and increments a counter variable on tap.	`StatefulWidget, State<T>, setState(), createState(), _variableName`
3.2	User Interaction & Gesture Detection	Handle taps, long presses, and swipes using GestureDetector. Apply InkWell for Material ripple effects.	Build: 'Gesture Playground' — log swipe directions, scale on long-press, and show snackbars on double-tap.	`GestureDetector, onTap, onLongPress, onDoubleTap, InkWell, ScaffoldMessenger.showSnackBar()`
3.3	Forms & Input Validation	Build validated forms using Form, GlobalKey<FormState>, and TextFormField validator functions.	Build: 'Sign-Up Form' — validate email and password lengths, displaying a success SnackBar or red errors.	`Form, GlobalKey<FormState>, TextFormField, validator, .validate(), .save()`
3.4	Lists with State: Add & Delete Items	Manage dynamic List data in a StatefulWidget. Add/remove items and trigger ListView rebuilds. Use Dismissible.	Build: 'Dynamic To-Do List' — append tasks to a list and swipe to delete them using Dismissible.	`List.add(), List.removeAt(), ListView.builder, Dismissible, key: ValueKey()`
3.5	Async Dart & Futures	Write non-blocking code with async/await and Futures. Use try-catch for errors and show loading spinners.	Exercises: Write a Future function that waits 2s, returns data, and displays a CircularProgressIndicator.	`Future<T>, async, await, try-catch, CircularProgressIndicator, FutureBuilder`
3.6	Fetching Data from the Internet	Use the http package to GET JSON data from a REST API. Parse it with jsonDecode and map to Dart classes.	Build: 'Joke Fetcher App' — fetch random jokes from a public API and display them with FutureBuilder.	`http package, http.get(), jsonDecode(), fromJson(), FutureBuilder, snapshot`
3.7	Local Data Persistence with SharedPreferences	Save/retrieve simple key-value data (strings, bools) across app sessions using shared_preferences and initState().	Build: 'Remember Me App' — save a user name and auto-load it on next launch using SharedPreferences.	`SharedPreferences.getInstance(), .setString(), .getString(), initState()`
3.8	Module 3 Project: Interactive App	Apply forms, gestures, lists, async API fetching, and local persistence into a cohesive interactive app.	Project: 'Trivia Quiz App' (API fetching + tracking score) OR 'Personal Task Manager' (dynamic lists + persistence).	`Full Module 3 — StatefulWidget, http, SharedPreferences`

Module 4

Final App Project

Students design, plan, build, and present a complete original Flutter app running on mobile and web, integrating state, data, and clean multi-platform routing.

Approx. 5 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Widgets / Concepts
4.1	Final Project Briefing & Ideation	Design a complete cross-platform app demonstrating multi-screen UI, stateful interaction, and data integration.	Ideation Session: Pitch 3 app ideas. Fill out a Project Idea Form scoping features, platforms, and data sources.	`App concept, multi-platform planning, feature scoping`
4.2	UI Design & Widget Planning	Sketch wireframes, map navigation flows, and construct a widget tree diagram for complex screens.	Design Deliverable: Submit wireframes labelled with Flutter widgets and a complete navigation flow map.	`Wireframe, widget tree diagram, navigation map, ThemeData plan`
4.3	Project Setup & UI Skeleton	Configure pubspec.yaml. Set up routing with named routes. Build placeholder screens and apply ThemeData.	Build Sprint: Create all screens, define routes, and test navigation on emulator and Chrome web.	`named routes, initialRoute:, routes: {}, ThemeData, pubspec.yaml`
4.4	Core Features Build — Part 1	Implement the primary screen functionality. Convert placeholders to StatefulWidgets and connect UI to setState().	Build Sprint: Core interactive feature working end-to-end. UI updates correctly based on user input.	`StatefulWidget, setState(), TextEditingController, Navigator`
4.5	Core Features Build — Part 2	Complete remaining screens. Integrate API fetching or SharedPreferences persistence. Handle empty/loading states.	Build Sprint: API or local data integration complete. Data loads on startup and saves appropriately.	`http.get(), FutureBuilder, SharedPreferences, initState(), snapshot.hasData`
4.6	Multi-Platform Testing & Responsiveness	Run the app simultaneously on Android and Chrome web. Use LayoutBuilder to fix platform-specific overflow errors.	Platform Testing: Verify the app adapts from a 1-column layout on mobile to a multi-column layout on web.	`flutter run -d chrome, flutter run -d all, LayoutBuilder, MediaQuery`
4.7	Polish, Error Handling & Code Quality	Add SnackBars, loading indicators, and error catching. Refactor repeated widgets. Run flutter analyze.	Polish Sprint: Add UX confirmations. Extract ≥1 custom widget. Fix all warnings and peer-test.	`SnackBar, CircularProgressIndicator, custom widget extraction, flutter analyze`
4.8	Final Presentation Day	Present the completed cross-platform app, discussing code structure, challenges, and multi-platform quirks.	Final Demo: 4-minute live walkthrough on mobile + web + Q&A. Certificates awarded.	`Full course — Flutter & Dart`

Teaching Notes & Tips

Pacing Guidance

Each module contains 8 lessons (~35–45 mins), totalling ~20 hours. Environment setup (1.2) may take a full session. API fetching (3.6) is challenging and benefits from live coding.

Differentiation

Advanced students can explore Provider/Riverpod for state management, Firebase Auth/Firestore, or deploying web apps to GitHub Pages. Core students should focus on basic SharedPreferences over API calls.

Assessment Criteria

Capstone assessed on: (1) UI Quality (clean widgets). (2) Navigation (named routes). (3) State Management (correct setState usage). (4) Data Integration. (5) Multi-Platform (runs on mobile & web).

Tools & Environment

Required: Flutter SDK, VS Code with Flutter/Dart extensions, Android Studio (emulator), Chrome. DartPad used for initial Dart syntax. Pre-imaging school lab machines is highly recommended.

Final Project App Ideas

Trivia Quiz (Open Trivia API + SharedPreferences), Weather App (Open-Meteo API), Personal Finance Tracker (persistent lists), Flashcard App, News Reader (NewsAPI).

Prior Knowledge Expected

Students should be confident in Python (OOP, functions, loops) OR Block-based App Development (variables, event-driven flow). No prior Dart or Flutter experience is required.

Enroll Your Child Now