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
