This document discusses building cross-platform mobile apps with Flutter. It introduces Flutter, explaining that it allows building apps with a single codebase that runs on iOS, Android, and web. The benefits of Flutter like performance, ease of use, and large developer community are highlighted. Finally, the document demonstrates how to set up a development environment and build a simple chat app with Flutter and Firebase.

1. By:
Moiz Chauhan
Flutter Bootcamp

2. What we will be achieving:
•Cross-Platform Application development
•Introduction to Application development with Flutter its
basics and Job market
•Create your first Flutter live with us!
•QnA session

3. What is Cross-Platform?
A cross platform
programming language let
developers to develop apps
for various platforms using
a single codebase.

4. Benefits Of Cross-Platform
• Single Code-Base for Multiple Platforms
• Reusable code
• Reduced development costs and time
• Easier maintenance with reduced costs
• Ability to effectively reach the broader audience
• Simple cloud integration

6. ● Fast Development
● Expressive and Flexible UI
● Native Performance
● Easy to Learn
● Supports apps at 120FPS
Why Flutter?
because it's fast

7. Flutter
A Google's UI toolkit for
building beautiful, natively
compiled applications for
mobile, web, desktop, and
embedded devices from a
single codebase.

8. How Flutter Works
Architecture
Material
Cupertino
Widget
s
Services
Rendering
Animation
Painting
Gestures
Framework
(Dart)
Skia Mojo Dart Engine
Shell (C++)

10. Technologies
C++
Skia (2D Rendering Engine)
Mojo IPC
Blink Text Rendering
Performance
Earlier versions of Flutter Supported till 60fps
Current one supports 120fps
BG Tech and
Performance

11. The New Homeground
Dynamically typed language with optional types
dart SDK-includes libraries & command-line tools
dart VM - online version - dartpad
dartanalyzer - statically analyzes code, helping you
catch errors early
pub.dev - package manager
Dart2js - Dart to JavaScript Compiler
DART

12. Benefits For Freshers
Good Job Market
Easy to learn
Only One language to learn for starters
Avg. Salary is 5 to 6 lakhs in India
Good Exposure to various platforms
NO DSA Required
Makes you future ready for Fuchsia OS

13. 1) G Pay
2) Google Ad Services
3) Hamilton
4) Alibaba
5) Cryptograph
Popular apps using Flutter Framework
https://flutter.dev/showcas
e

14. Flutter vs Native

15. 1.Classes, enums, typedefs, and extensions name should be in
UpperCamelCase.
2.Libraries, packages, directories, and source files name should be in
snake_case (lowercase_with_underscores).
3.Variables, constants, parameters, and named parameters should be in
lowerCamelCase.
4. Whenever you have widgets that don’t change when the state
changes, you should declare them as constants.
Naming convention in a Flutter project

16. • Android Studio or VS Code installed on your PC.
• Flutter SDK (stable) installed
• Install extension on your IDE
• A cup of your favourite coffee.
Creating a new Flutter project
Prerequisites

17. 1.flutter doctor
2.flutter version
3.flutter upgrade
// Checks SDK for any errors
// logs currently used flutter version
// upgrades SDK Version
4.flutter create YOUR_APP_NAME // creates app with YOUR_APP_NAME as app name
5.flutter emulators // lists all active emulators
6.flutter pub get // gets dependencies and packages necessary to run the project
7.flutter analyze -d // analyzes dart file for any errors
8.flutter run // builds and runs said package on the emulator
9.flutter pub update // updates packages in use
10.flutter build // builds app

18. Let’s
flutter create

19. Hot Restart and Hot Reload
State
Original Code
Hot Reload (r) Hot Restart (shift +r)
State
Original Code
New Code
Compiles new code
New Code
Does not update the state value
State
Original Code
New State
Updated Code
Compiles new code
New Code
Sets the value of all the states to default (restarts app)

20. Everything within a flutter
application is a Widget in
Flutter from a simple “Text” to
“Buttons” to “Screen Layouts
- ProFlutterDev

21. Widgets Everywhere... App Widget
Material Widget
App Widget
Material Widget
Scaffold Widget
Column
Container
Text
Button

22. • MyApp is the parent widget and
Material App is its Child widget.
• Scaffold is the parent widget
then AppBar ,Column and
FloatingActionButton are its
children.
Hierarchy

26. State Managment
• SetState
• Provider (Recommended)
• BloC
• MobX
• ReduX
• GetX

27. A Live Chat application
Let's Create
Something Live

29. Firebase is a fully managed
platform for building iOS, Android,
and Web applications that
provides automatic data
synchronization, authentication
services, file storage, analytics and
more.
It is a BaaS (Backend as a Service).
Firebase
The Easiest Database

30. Create Application without backend server
No need extra money spent for backend server
Faster than any backend web services
Push notification
No SQL database so it is more faster
Auto backup
Why FireBase?

31. “ Everything in firebase is stored as map”

33. Thank You For Attending