App Dev Workshop

1. App Development
Workshop: Intro to
Flutter
Tech-Con, organized by GDSC IIITN

2. Introduction to App Development
● Mobile apps have become an integral part of our daily
lives, offering convenience, accessibility, and functionality
for various purposes.
● Mobile apps are developed for different platforms, such
as iOS, Android, and others, to cater to the diverse user
base and market demands.
● Using frameworks like Flutter for app development can
offer several benefits, such as faster development cycles,
cross-platform capabilities, and rich UI experiences,
enabling developers to create high-quality apps efficiently
and effectively.

3. 1. Frontend
➔ User interface (UI)
components that users
interact with
➔ UI components may
include screens, views,
widgets, buttons, etc.
➔ Responsible for rendering
the app's visual elements
and handling user
interactions
Architecture of an App
2. Backend
➔ Server-side logic that
manages data and
business logic
➔ May include APIs,
databases, cloud services,
authentication, etc.
➔ Responsible for processing
data, handling requests,
and performing business
operations
3. Importance
➔ App architecture impacts
performance, scalability,
and maintainability
➔ Understanding app
architecture aids in efficient
code design and easier
maintenance
➔ Proper app architecture
enables flexibility for adding
features and integrating
with third-party services

4. Introduction to Flutter
● Flutter: Open-source UI toolkit for building mobile,
web, and desktop apps from a single codebase
● Key Features: Hot-reloading, rich UI components,
single codebase for multi-platform, strong community
support
● Advantages: Fast development, high performance,
cross-platform, visually appealing UI, suitable for
different use cases

5. Well Known Apps Developed in Flutter

6. Components of an App
❖ Widgets:
● Basic UI elements in Flutter
● Includes text, images, buttons, etc.
● Used to build the user interface of
an app
❖ Layouts:
● Types of layouts in Flutter (e.g.,
Row, Column, Stack)
● Used to organize widgets on the
screen
❖ States:
● refers to the values and
information that can change and
affect the appearance and
behavior of a widget.
● Stateless Widgets (immutable) vs.
Stateful Widgets (mutable)
❖ Buttons:
● Importance of buttons in app
development for user interactions
● Types of buttons in Flutter (e.g.,
RaisedButton, FlatButton,
IconButton)
● Usage and functionality

7. Stateless Widget vs Stateful
Widget
● Mutable, used for
dynamic UI components.
● Choose Stateful for
dynamic UI
● Example : form, user
input, UI updates based
on data changes
● Immutable, used for
static UI components.
● Choose Stateless for
static UI
● Example : image, text,
icon etc.

8. App Permission
Concept of app permissions and their
importance in mobile app development:
➔ Overview of different types of
permissions apps may require (e.g.,
camera, location, contacts)
➔ Implications of granting app permissions
to users' personal data and the need for
responsible permissions management
➔ Best practices for requesting app
permissions, such as clear explanations
and seeking permissions only when
necessary for app functionality

9. Quiz Time
Test your knowledge with our interactive quiz!
Get ready to show off your expertise and learn
from discussions about the correct answers!

10. Stateless
or Stateful?

12. Hands-On
Get your hands dirty with Flutter!
Log in @ https://flutlab.io/workspace

13. Road Map
● Learn Dart programming language
● Understand Flutter architecture
● Learn Flutter layouts, UI
● Learn Flutter animations and gestures
● Learn Flutter packages and plugins
● How to show Notification to user
● Connect with APIs and database

14. Let’s Get Interactive!
Your Questions,
Our Answers!

15. Thank You !!!