The Magic of Flutter
By : Ahmed Abu Eldahab
@dahabdev

Ahmed Abu Eldahab
Senior Technical Consultant
Google Developer Expert in Flutter
/Dahabdev

Mobile Platforms

Mobile Platforms

Mobile Platforms

Mobile Platforms

Mobile Platforms

The dilemma of mobile app development

Flutter For Business (CEOs - PMs )

Flutter For Business (CEOs - PMs )

Flutter For Business (CEOs - PMs )

Flutter For Developers

IOS
Kernel and Device Drivers
Core OS
Core Services & Media
OEM Widget (Material Design - Cupertino)
Android

Mobile Development Approaches

Native Approach(Single Platform)
OEM Widgets
Cupertino
Material Design
Canvas
Events
Location Bluetooth
Camera Sensors
Java
Kotlin
Swift
Objective-c
Application
Services

Cross-Platform Approach

Advantages Disadvantages
Tech
- Rich user experience
- High performance
- Security matter
- Native API support
Biz
- Easy to hire
- Stable codebase
Tech
- Two different Platforms
- Two different programming languages
- Not easy to maintain the same UI
Biz
- Double time
- Double Cost
- Two different teams
Native Approach (Single Platform)

Hybrid Approach
Web View
Canvas
Events
Location Bluetooth
Camera Sensors
JavaScript
HTML
CSS
Application
Services
Bridge

Cross-Platform Approach
Canvas
Events
Location Bluetooth
Camera Sensors
Transferred
Native Code
Application
Services
FrameworklibrariesSDK
OEM Widgets
Cupertino
Material Design
C#
JavaScript

Cross-Platform Approach
Canvas
Events
Location Bluetooth
Camera Sensors
Javascript
Application
Services
JavascriptBridge
OEM Widgets
Cupertino
Material Design
JavaScript

Flutter Approach
Canvas
Events
Location Bluetooth
Camera Sensors
Native ARM
Binary
Code
Services
Platform
Channels
Flutter Widgets
Cupertino
Material Design

Build
beautiful apps
in record time

Control every pixel on the screen
Make your brand come to life
Never say "no" to your designer
Stand out in the marketplace
Win awards with beautiful UI
Beautiful

Fast
Brings the power of a games engine to
user experience development
60fps, GPU accelerated
Compiled to native machine code

Sub-second reload times
Paint your app to life
Iterate rapidly on features
Test hypotheses quicker than ever
More time to experiment & test
features
Single-codebase for faster collab
3X Productivity Gains
Productive

What is Flutter?
Flutter is the next step in
App development
Speed and performance
Fast , smooth performance
Flexibility
Customize anything - Brand
first design
Native look and feel
Familiarity , ease of use
Rapid Development
Easy to learn , predictable

What makes Flutter unique?
- Compiles to Native Code (ARM Binary code)
- No reliance on OEM widgets
- No bridge needed
- No markup language (only Dart)

● Language and Libraries
● Packages manager https://pub.dartlang.org/
● Virtual machine
● Compile to Javascript dart2js
Batteries included

Who use Dart?
https://www.dartlang.org/community/who-uses-dart
Google AdWords Google Fuchsia
AdSense
performance reports
Google Fiber
Mandrill AdWords for video
Google internal
sales tool
Google internal
CRM
Adobe

Google Fuchsia
Fuchsia is a capability-based, real-time operating system (RTOS)
currently being developed by Google.
https://github.com/fuchsia-mirror/

Confidential + Proprietary
Who uses Flutter?

Hamilton launched as a
featured app on iOS and
Android within three
months of us writing our
first line of Flutter code.
“
”

Confidential + Proprietary

>1M+ installs
500,000 MAU
160,000 DAU
65M+ Cloud Invocations
4.7 Star rating on Play

“Flutter provides a modern reactive
framework that enabled us to unify the
codebase and teams for our Android and
iOS applications.
It's allowed the team to be much more
productive, while still delivering a native
application experience to both platforms.
Stateful hot reload has been a game
changer for productivity”
Sridhar Ramaswamy
SVP, Google Ads and Commerce

Alibaba’s app incorporates Flutter to power
parts of their app.
Deployed to millions of devices.
Alibaba praises Flutter for its consistency
across platforms, the ease of generating UI
code from designer redlines, and the ease
with which their native developers have
learned Flutter.

We have 3x the bandwidth
now that all of our teams
are consolidated on a single
code base.
“
”
Much easier to hire. We now
look to take the best candidate
regardless if they are from Web,
iOS or Android.
“
”

Full frame is great, use a scrim for text.

HTML/CSS Analogs in Flutter
var container = new Container( // grey box
child: new Text(
"Lorem ipsum",
style: new TextStyle(
fontSize: 24.0
fontWeight: FontWeight.w900,
fontFamily: "Georgia",
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
<div class="greybox">
Lorem ipsum
</div>
.greybox {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Georgia;
}

Great looking and fast Widgets

https://flutter.io/widgets/

HotReload

With Flutter no limit to
your imagination!

FlutterWidgetInspector

$ flutter doctor
Checks your environment and displays a report to the terminal window
$ flutter upgrade
Updates both the Flutter SDK and your packages

Test
https://flutter.io/testing/
- Unit testing
- Widget testing
- Integration testing

How To install ?
https://flutter.io/get-started/install/

IDE Support?

Flutter Showcase
https://flutter.io/showcase & https://itsallwidgets.com

Flutter Showcase
https://flutter.io/showcase & https://itsallwidgets.com

Flutter Showcase
https://flutter.io/showcase & https://itsallwidgets.com

Confidential + Proprietary
Key component of the Google Developer family

Bring your app
to the the other
platform
Start a new app
from scratch
Use Flutter for
a part of your
app
Prototype a
new app idea
Four ways to use Flutter today

Thanks

Ahmed Abu Eldahab
Senior Technical Consultant
Google Developer Expert in Flutter
/Dahabdev