Mobile Apps Development & Design using Flutter

Course Overview/Objective

Course Objective: The Mobile Apps Development & Design using Flutter course is designed to provide learners with the skills necessary to build high-quality, cross-platform mobile applications using the Flutter framework. The course covers the fundamentals of Flutter, starting with an introduction to Dart, the programming language used with Flutter. Students will learn to design and build responsive and interactive user interfaces using Flutter’s rich set of pre-built widgets, mastering the creation of both Android and iOS apps from a single codebase. Key topics include UI design, app navigation, state management, data handling, API integration, and incorporating animations. The course also delves into testing and debugging techniques, helping students ensure the reliability and performance of their apps. By the end of the course, learners will be equipped to deploy their apps to app stores and will have a solid understanding of industry best practices in mobile app development, enabling them to create polished and professional mobile applications with Flutter.

 

Module Code

Module Name

Duration (Hrs)

101

Introduction To The Course

06

102

Dart Programming Language

18

103

Basic Widgets in Flutter

21

104

State Management with Stateful Widgets

12

105

State Management with Provider

15

106

Local Persistence

12

107

Firebase

21

108

REST APIs

15

Total

120 Hrs

 

Requirements

H.S.C/Equivalent

Course Project
-
Used Tools
-
Course Outline
  1. Introduction To The Course
  • Welcome To The Course
  • Set up Flutter SDK Android Studio & Plugins

 

 

  1. Dart Programming Language
  • Module Overview
  • Basic Data Types & Variables
  • Boolean String & String Interpolation
  • Var Dynamic & Object
  • Final Const & Late Variables
  • Common Operator in Dart
  • Data Structure: List
  • Data Structure: Map
  • Data Structure: Set
  • Conditional Statement: If Else and Switch
  • Solution to Conditional Statement Exercise
  • Dart Loop: For loop
  • Dart Loop: While & Do While
  • Nullable Variable & Null Check Operator
  • Function: Positional & Named Parameters
  • Function Reference & Lambda Expression
  • Dart Class & Object
  • Association in Dart
  • Inheritance Overview
  • Down Type Casting
  • Named Constructor
  • Runtime Polymorphism
  • Abstract Class & Method
  • Mixin in Dart
  • Wrap Up lesson of Dart

 

 

  1. Basic Widgets in Flutter

 

  • Basic Widgets: Introduction
  • Hello World: Material & Text Widgets
  • Scaffold Appbar & Center Widget
  • More on Text Widgets & Richtext
  • Row & Column
  • Load Image from Network
  • Solution to Design Practice
  • Code Refractoring
  • Container Widget
  • Listview vs Column
  • Listview Builder Constructor
  • Grid View Builder Constructor
  • Change State with Stateful Widget
  • Stack & Positioned Widget

 

  1. State Management with Stateful Widgets

 

  • Mega Roll: Introduction
  • Load Images from Asset
  • Add Google Fonts Dependency
  • Generate Random Image
  • Control Widget Visibility
  • Complete Game Play Logic
  • Game Start Screen
  • Finalize Game
  • M4 Project

 

  1. State Management with Provider
  • State Management: App Overview
  • Project 1 : BMI Project Setting
  • Project 1: BMI Slider Widget
  • Project 1 : Custom BMI Result Widget
  • Project 1 : Calculate BMI & Show Result
  • Project 1 : Update BMI Status & Color
  • Flutter State Management Overview
  • Change Notifier & Change Notifier Provider
  • Consumer Widget
  • Wrap Up
  • M5 Project

 

  1.  Local Persistence

 

  • Module Introduction & App Overview
  • Project Setup
  • Add Bottom App Bar to Home Page
  • Form & Textform Field Widget
  • Form Validation
  • Contact Model Data Class
  • Create DB Helperclass & Database
  • Insert First Contact
  • Update UI After Insertion
  • Delete Contact With Dismissible Widget
  • Update Contact favorite
  • Use of Future Builder Widget
  • Call & SMS Contact
  • Scan Visiting Card
  • Show Scanned Text
  • Long Press Draggable Widget: Make Each Line Draggable
  • Drag Target Widget: Drop Draggable Item
  • Populate Form Fields with Scanned Values
  • Database Migration: Add a Column to Existing Table
  • Wrap up
  • M6 Project

 

  1.  Firebase
  • Admin App: Ecom App Overview
  • Admin App: Admin Starter Project Overview
  • Admin App: Firebase Overview
  • Admin App: Create a Firebase Project & Add Android Module
  • Admin App: Launcher Page - Decide Admin Landing Page
  • Admin App: Login as Admin Using Email & Password
  • Admin App: Logout Admin
  • Admin App: Problem with Admin Credentials
  • Admin App: Create Your First Database & Collection
  • Admin App: Validate Admin Account
  • Admin App: Dashboard Page Overview
  • Admin App: Product, Category and Purchase Model Overview
  • Admin App: Add Category
  • Admin App: Show All Categories
  • Admin App: Show Category in Dropdown Button
  • Admin App: Setup Camera & Date Picker
  • Admin App: Upload Image to Firebase Storage
  • Admin App: Create Image Model Class Using Freezed
  • Admin App: Modify Product Model Class
  • Admin App: Add New Product
  • Admin App: View Products
  • Admin App: Update Product Field
  • Admin App: Show Purchase History
  • Admin App: Repurchase Product
  • Admin App: Set Order Settings
  • Admin App: Add Additional Images
  • User App: Overview
  • User App: User Registration
  • User App: Modify View Product Page
  • User App: Add Product to Cart
  • User App: Remove Product from Cart
  • User App: Add a Cart Bubble
  • User App: Update Cart Item Quantity
  • User App: Calculate Order Summary
  • User App: Select Payment Method Using Radio Widget
  • User App: Set User Address to Text Fields
  • User App: Place Order
  • User App: Test Order
  • User App: Rate Product
  • User App: Show User Orders
  • User App: Show Orders in a Expansion Panel List
  • User App: Google Sign In: Get the SHA1 key
  • User App: Google Sign In: Add Functionalities
  • User App: Google Sign In: Test and Run
  • User App: Cloud Functions Overview
  • User App: Setup & Initialize Cloud Functions
  • User App: Write Your First Cloud Function
  • User App: Deploy Cloud Function
  • User App: Receive Notification in Admin App
  • User App: Wrap Up
  • M7P1 Project
  • M7P2 Project

 

  1. REST APIs
  • Daily Weather: Introduction
  • Starter Project Overview
  • Open Weather Map Overview
  • Json to Dart Object
  • Get Current & Forecast data
  • Show Current Data
  • Show Forecast Data
  • Get Device Location & Update Data
  • Convert & Save Temperature Unit
  • Implement Search Delegate
  • Convert City to Coordinates
  • Parallax Background: Floating Clouds Effect
  • Wrap Up
  • M8 Project