Workshop (One-Day) on

Introduction to Mobile
Application Development

By: Tanmoy Biswas,

UG BoS member, Computer Science,
University of Calcutta,
Assistant Professor, Department of Computer Science,
Syamaprasad College
 Gratitude
• Dr. Natasa Dasgupta – Principal
• Dr. Nirmalendu Mukhoti – IQAC Coordinator
• Prof. Paramita Sikdar – Convener, Senior member UG BoS, Calcutta University and Head, Department
of Computer Science.
• Dr. Amlan Chakrabarti, Chairman, UG BoS, Computer Science, University of Calcutta, Director, AKCSIT,
University of Calcutta.
• Dr. Sankhayan Choudhury, Head, CSE Department and Senior member, UG BoS, University of Calcutta.
• Dr. Nabendu Chaki, Professor, CSE Department, University of Calcutta.
• Dr. Soumya Sen, Assistant Professor, AKCSIT, University of Calcutta.
• Dr. Himadri Bhattacharyya, Principal, Bangabasi College and Senior member, UG BoS, University of
Calcutta.
• Prof. Swagata Saha Sau, Member UG BoS, Calcutta University, Head, Department of Computer Science,
Sammilani Mahavidyalaya,
• Organizing Committee members –
1. Ms. Oindrilla Ghosh
2. Ms. Mausumi Paul
3. Ms. Soumita Chakraborty
4. Mr. Arup Kumar Goswami
• All respected colleagues , teaching, non-teaching and students of Vidyasagar College.
 Mobile App Development - Flutter & Dart

Getting Started - Installation

Objective
Practical

IDE – Android Studio

Discussion

Emulator
Installation of Flutter

Syllabus
Configuration of Flutter

Theory Android Virtual Device

 Mobile App Development - Flutter & Dart

Theory Practical Full Marks - 50

Semester – 3, Credits - 02,

IDE
Contact hours - 45
Semester – 3, Credits - 02,
Contact hours - 30

Android Studio

Full Marks - 50

Flutter and Dart

 Why use Flutter?
Flutter is a popular choice for mobile app development for several
compelling reasons

Codebase for iOS & Android

Cross-Platform Development
Saving time and resources

See changes in real-time.

Hot Reload
Speeds development process

Compiled directly native ARM code.

Performance
High performance and smooth
animations.
 Why use Flutter?
Rich set of pre-designed widgets.
Customizable Widgets
Customized - responsive UI.

large and active community.

Open Source
Resources, plugins, and support

Both platforms reduces the overall development cost.

Cost-Effective
Removes the problems regarding separate native apps.

Flutter is backed by Google

Strong Backing
Regular updates, improvements, and a robust
ecosystem.
 Mobile App Development - Flutter & Dart- Theory
What is it?

Builds Native Application

Google’s portable UI
framework

Builds
Reactive applications for iOS
and Android.
Flutter Framework

Dart programming
language, compiles to
native ARM code
Flutter Framework

Skia 2D engine for

rendering, supports the
OpenGL ES2-accelerated
backend

Written in C/C++, layer

provides graphics,
accessibility support, text
layout and other essential
APIs.
Flutter Framework

A platform specific
embedder is used to
help the Flutter App
to run on any OS.
• Dart is Ahead-Of-Time (AOT) compiled to native code, making your
Flutter application fast.
• Dart is also Just-In-Time (JIT) compiled, making it fast to display
your code changes such as via Flutter’s stateful hot reload feature.
 Widgets

Widget Tree

Stateless

Many widgets have no

mutable state: they don't Stateful
have any properties that
change over time (for Unique characteristics of a widget
example, an icon or a label). need to change based on user
These widgets subclass interaction or other factors, that
StatelessWidget. widget is stateful.
 What to do?
Install Android Studio

Enable AVD

Install Flutter
Minimum System requirements
 Visit https://developer.android.com/studio

Accept

Download
Select
Select
Path can be left
as default
Accept
Visit https://docs.flutter.dev/get-started/install
Select
Download Download to any folder of choice
Extract Extract to any folder of choice
Choose the C drive Copy the extracted Flutter folder here
 Open the flutter folder and the bin folder

Check the file path: c:\flutter\bin

Copy the link

Enter Flutter
Enter Flutter Doctor at command prompt
In the Android Studio search SDK manager
In the Android Studio search SDK manager

Choose SDK tools

Choose SDK CLI tools

Run Flutter Doctor - again
Click Plugins
 Restart IDE

Marketplace

Choose Flutter
Select Flutter Folder

Path gets selected here

Click Flutter

Click Next
 Create a Sub folder for project 1

Create a folder for project

 Click New Flutter Project

Click Project

Select project-1
Enter Project name

Use the naming convention for Dart

Use the naming convention for Dart
Under Project - Select Lib folder and click the main dart file
 Under Device Manager

Click Create Virtual Device

Click Create Virtual Device

Select Mobile model

Select the Android Version of OS
Select Hardware for better performance
Select the Active Virtual button
Android Virtual Device
Program Starts from here always
 Training Modules

Day 1 (Duration – 3 hrs.)

Install & Setup Flutter

Intro to Flutter -
• About Widgets (Stateless & Stateful widgets)
• pub.dev
• useful packages
• Widget Lifecycle
• App Lifecycle
Dart Essentials -> Basics | Effective Dart | Core Libraries | Asynchronous Programming
 Training Modules

Day 2 (Duration – 3 hrs.)

• Route Management -
• Navigator API
• GoRouter
• Go Router builder
• Nested Routing

Day 3 (Duration – 3 hrs.)

• Dive into Widget Library & Utilize Common Widgets / Components
• Firebase & GCP -> Authentication | Storage | Firestore | Crashlytics | Push
Notification | Google Maps |
 Training Modules
Day 4 (Duration – 3 hrs.)
• State Management
• Riverpod
• Flutter Hooks
• Project: Counter app with Theme Switch

Day 5 (Duration – 3 hrs.)

• Network Layer -
• DTOs
• Connect with API's
• Json serialization
• Error Handling
• MVVM
• Clean Architecture
• Feature first approach
 Training Modules
Day 6 (Duration – 3 hrs.)
• Quiz App
• Features: Multiple choice questions with scoring.
• Skills: Lists, navigation between screens, and state management.

Day 7 & 8 (Duration – 6 hrs.)

• Project: Simple Ecommerce Application:
• Authentication
• Browse Products
• Add to Cart
• Purchase
• View Order History
• Utilizing - Clean Architecture, Feature-first approach, Network Calls, firebase
integration.
 Training Modules

Day 9 & 10 (Duration – 6 hrs.)

• Chat App
• Features: Real-time messaging between users.
• Skills: (Firebase/Firestore or any backend), user authentication, notifications.
Thank You