This document introduces Flutter, an open-source framework for building mobile, web, and desktop applications from a single codebase. It discusses Flutter's key components like widgets, the widget tree, state management, and the rendering engine. It also covers how Flutter allows building user interfaces as code, uses Dart as the programming language, and supports platform-specific code via plugins. The document proposes a challenge to build a Flutter app with Firebase backend over a week and share it via a GitHub repository and pull request.

1. leap of faith
Let’s take a leap of faith into flutter…
Damith Warnakulasuriya
Software Engineer
Compiled on 14th of September 2020
Last Updated on 19th of January 2022

2. Savepoints
● Introduction to flutter
● Flutter Approach
● Flutter Key Components
● Flutter in Industry
● Coding Journey
● Challenge !

3. Flutter
Flutter is a cross platform application development environment that enables
you to write native mobile, web and desktop applications with a single code
base.

5. Native?

6. Native Application Environment

7. Reactive Application Approach

8. Flutter Approach

9. Flutter
● Flutter Framework
● Flutter Widgets
● Dart
● UI as Code
● Widget Tree
● State
● Flutter Rendering Engine
● Platform Specific Code
● Single Codebase

10. Flutter Framework
Stateless or stateful Widgets are
the building blocks of any Flutter
app and can be themed to look like
native Android (Material) or iOS
(Cupertino) UI components.
Widgets are rendered onto a Skia
canvas with support for advanced
animations and gesture
recognition.
Flutter’s engine hosts the core
technologies Skia – a 2D graphics
rendering library – and the Dart
language VM in a platform-specific
shell

11. Flutter Widgets
Everything is a Widget !
In flutter, Widget is a way to
declare and construct UI
Widget is not just a piece of UI.
Widget is a lot more than just
structural elements like buttons,
text, image, list or slider.
A widget might display Something,
it might help define design, it might
help with layout, it may handle user
interaction, etc

12. Dart
Easy and Powerful !
Dart is a reactive language that talks
similar to python in terms of ease of
coding while keeping the power of
java like syntax under the hood
Optimized for building UI
Productive development with hot
reload
Compiles to Native Machine Code

13. UI as Code

14. Widget Tree
The widget tree is how you create
your UI; you position widgets within
each other to build simple and
complex layouts. Since just about
everything in the Flutter framework
is a widget, and as you start
nesting them, the code can
become harder to follow
keep the widget tree as shallow as
possible

15. State
A widget can be either,
1. Stateful Widget
2. Stateless Widget
Stateless widgets have no internal
state, therefore difficult to modify
without re-initializing.
State is the information that can be
read synchronously when the
widget is built and might change
during the lifetime of the widget

16. Rendering Engine
Skia: A cross-platform rendering
framework sponsored and
managed by Google. It serves as
graphics engine for iOS/Android
applications
Flutter can implement UI isolation
on Native and Flutter Engine. It
also captures the UI code without
analyzing the platform
implementation on the cross-
platform scapture
Capturing high-memory images of
the Native side solutions is a
challenge

17. Platform Specific
Code
Flutter uses a flexible system that
allows you to call platform-specific
APIs whether available in Kotlin or
Java code on Android, or in Swift
or Objective-C code on iOS.
Flutter’s builtin platform-specific
API support does not rely on code
generation, but rather on a flexible
message passing style.
Alternatively, the package Pigeon
can be used for sending structured
typesafe messages via code
generation

18. Single Codebase
One codebase for different
platforms is the core idea of
flutter.
The flutter team is working on
extending the platform
compatibility.
At the moment mobile is in stable
channel and recently web also
moved to stable channel which is
also good enough for an standard
production.

19. Ebay Motors

20. Ebay Motors : Benefits of cross platform

21. Companies that use flutter,

22. Cut the crap !
Lets Code ; )

23. Create App
Create the basic
flutter app using the
flutter SDK and tools
Build UI
Build the responsive
UI Widgets
Connect
Firebase
Config and connect to
firebase with async
functions and
callbacks
Convert to
Platforms
Convert the codebase
to different platforms.
Platform
Specifics
Write some platform
specific code before
windup
Repo url : cutt.ly/flof

24. Future of Flutter
Flutter team is working very hard towards fulfilling the vision of one codebase for a single app to be
deployed across different platforms as follows
Production Ready,
● Flutter iOS
● Flutter Android
● Flutter Web
Still Growing,
● Flutter Desktop for macOS
● Flutter Desktop for Windows
● Flutter Desktop for Linux
● Flutter Desktop for ChromeOS
● Flutter Embedded for Raspberry Pi
● Flutter Wearable for Android Wear OS
● Flutter Wearable for iOS watchOS (Not possible, but able to add native Apple Watch extension to
a Flutter app)

25. Worthy of a challenge?
(1 week)
Build a flutter app with a firebase backend.
Be creative to build your own idea or choose
one from the below list,
1. Photo Capturing app
2. Reminder App for special Events
3. Quiz App
4. ToDo List App
5. A mini Game
Or use your imagination...
Use,
Repo name : flof_{your_idea}
● Commit every step on the way
● Add me as a contributor : damithdev
And When you’re done,
● Pull request to new branch flof adding me as a
reviewer to the pull request