The Magic of flutter slides that I gave at Oman Comex 2019 conference

1. The Magic of Flutter
By : Ahmed Abu Eldahab
@dahabdev

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

3. Mobile Platforms

4. Mobile Platforms

5. Mobile Platforms

6. Mobile Platforms

7. Mobile Platforms

8. The dilemma of mobile app development

9. Flutter For Business (CEOs - PMs )

10. Flutter For Business (CEOs - PMs )

11. Flutter For Business (CEOs - PMs )

12. Flutter For Developers

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

14. Mobile Development Approaches

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

16. Cross-Platform Approach

17. 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)

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

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

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

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

23. Build
beautiful apps
in record time

24. 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

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

26. 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

27. 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

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

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

30. 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

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

32. Confidential + Proprietary
Who uses Flutter?

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

34. Confidential + Proprietary

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

36. “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

38. 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.

39. 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.
“
”

40. Full frame is great, use a scrim for text.

41. 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;
}

42. Great looking and fast Widgets

43. https://flutter.io/widgets/

44. HotReload

45. With Flutter no limit to
your imagination!

46. FlutterWidgetInspector

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

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

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

50. IDE Support?

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

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

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

54. Confidential + Proprietary
Key component of the Google Developer family

55. 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

56. Thanks

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