1. https://flutter.io/
Nhan Cao [April 13, 2018]

2. 2

3. WHAT IS FLUTTER?
• Open-source mobile app SDK
• Developed by Google
• Building high-performance apps for iOS and Android, from a
single codebase
3

4. WHY USE FLUTTER?
Flutter makes it easy and fast
to build beautiful
mobile apps.
• Reactive framework
• Material and Cupertino
widgets
• Hot reload
• Dart language and core libs
• Interop with mobile SDKs
• Android Studio/IntelliJ
official IDE 4

5. ARCHITECTURE
5

6. DART LANGUAGE
- Developed by Google
- Open-source with BSD license
- A very asynchronous language. With
this, it uses isolates for concurrency.
[First appeared October 10, 2011, Ecma International approved the Dart
language specification first edition in July 2014, Stable release 1.24 / June
12, 2017]
6

7. DART PLATFORMS
7

8. DART LANGUAGE
• Productive. Syntax must be clear and concise, tooling
simple.
• Fast. Runtime performance and startup must be great and
predictable even on small mobile devices.
• Portable. Client developers have to think about three
platforms today: iOS, Android, and Web. The language
needs to work well on all of them.
• Approachable. The language can’t stray too far from the
familiar if it wishes to be relevant for millions of
developers.
• Reactive. A reactive style of programming should be
supported by the language.
https://gist.github.com/nhancv/8ffce966d63becded05da6db3e778be7
8

9. 9
JAVA
VS
DART

10. DART LANGUAGE
Guys, this is an exciting time for
Dart.
10

11. FLUTTER IS ALL DART
• For smart compiler:
• With production: Dart is AOT (Ahead Of Time)
compiled to fast, predictable, native code.
• With dev mode serve hot reload: Dart can also be
JIT (Just In Time) compiled for exceptionally fast
development cycles.
11

12. FLUTTER IS ALL DART
• Consistent 60 FPS (frames per second) performance:
• With smart compiler above Dart makes it easier to
create smooth animations and transitions that run
at 60fps.
• Dart can do object allocation and garbage
collection without locks.
12

13. FLUTTER IS ALL DART
• Use Dart for Unified layout.
• Everything is a Widget.
• Flutter support full set of Material Design widgets
already; also support different themes for
Android/iOS. Not care about XML or JSX anymore.
13

14. DESIGN-ORIENTED DEVELOPMENT
FLOW
14
Similar with web app
design. Just a
Container, Row, Col,
Flex, ….

15. DESIGN-ORIENTED DEVELOPMENT
FLOW
15

16. REACTIVE
16
Reactive Frameworks on the Web
Reactive Frameworks on Mobile

17. REACTIVE
17
With Flutter

18. WIDGET
18
Widget state lifecycle

19. WIDGET
19
State<T> lifecycle

20. PERFORMANCE
• Flutter with high performance compare with React
Native and Native
• Compiles to Native Code
• No reliance on OEM widgets
• No bridge needed
• Structural Repainting
20

21. PERFORMANCE
21
Native view

22. PERFORMANCE
22
Cross-platform using webview
Cross-platform using React Native

23. PERFORMANCE
23
With Flutter

24. PLATFORM CHANNELS
24
Flutter uses a flexible
system that allows you
to call platform-specific
APIs whether available
in Java or Kotlin code on
Android, or in
ObjectiveC or Swift code
on iOS.

25. DEBUGGING TOOL
Begin with efficient tooling
You can start with cli or just using official IDE for Flutter is Android studio.
Easy and useful.
$ flutter doctor
$ flutter upgrade
$ flutter packages get
$ flutter packages upgrade
$ flutter format
25

26. DEBUGGING TOOL
Flutter support hot reload and you can easy debug UI,
Mem, CPU, GPU, …. and execution with Android
studio. It’s really good and better than React Native.
26

27. 27

28. APK SIZE
28

29. APK SIZE
29
https://flutter.io/faq/#how-big-is-the-flutter-engine

30. APK SIZE
30
With dev mode
Flutter: ARM, x86 and
x86_64
React Native: ARM,
x86. The apk size
minimum build by
Flutter is 21 MB
initial.

31. APK SIZE
31
With release mode
The apk size reduce
appreciably on
Flutter from 25.8 MB
(dev) to 8 MB
(release). But lib only
generated for ARM,
so that it’s only able
to install on ARM
device.

32. SUMMARIZE
• The advantages of reactive views, with no JavaScript
bridge
• Fast, smooth, and predictable; code compiles AOT to
native (ARM) code
• The developer has full control over the widgets and
layout
• Comes with beautiful, customizable widgets
• Great developer tools, with amazing hot reload
• More performance, more compatibility, more fun 32

33. OPPORTUNITY
• Google’s product
• Huge dev fan of google
• Free and Open source
• Rich documents
• You will be hunted in next few year. :D
33

34. CHALLENGES
• Quite new
• Beta version but let’s trust at Google bro. :D
• Dart lang is not almost popular
34

35. BEGINNER FIRST STEPS
• Why I move to Flutter: https://medium.com/@nhancv/why-i-move-to-
flutter-34c4005b96ef
• Complete Dart from Java if you are Java
developer: https://codelabs.developers.google.com/codelabs/from-
java-to-dart/#0
• Read Dart
convention: https://www.dartlang.org/guides/language/effective-
dart/style
• Complete simple Flutter
lab: https://codelabs.developers.google.com/codelabs/flutter
• Learn building layouts in Flutter: https://flutter.io/tutorials/layout/
• Use Cookbook to make your awesome
apps: https://flutter.io/cookbook/
35

36. REFERENCES
• What’s Revolutionary about Flutter: https://hackernoon.com/whats-
revolutionary-about-flutter-946915b09514
• Why I moved from java to dart: https://hackernoon.com/why-i-
moved-from-java-to-dart-8f3802b1d652
• Why Flutter uses Dart: https://hackernoon.com/why-flutter-uses-dart-
dd635a054ebf
• Why native app developers should take a serious look at
Flutter: https://hackernoon.com/why-native-app-developers-should-
take-a-serious-look-at-flutter-e97361a1c073
• Flutter — 5 reasons why you may love
it: https://hackernoon.com/flutter-5-reasons-why-you-may-love-it-
55021fdbf1aa 36

37. DEMO
• https://medium.com/@nhancv/flutter-simple-particle-motion-
3b48fd1f182
• https://medium.com/@nhancv/flutter-custom-indicator-animation-
simple-2c487489040b
• https://github.com/nhancv/nc_flutter_util
37