1. Flutter 101
Introduction to Flutter
Arif Amirani
CTO & Co-Founder at MetroGuild Inc

2. Agenda
◦ What is Flutter?
◦ Compare to Native/OEM Widgets based
◦ Setting it up
◦ Demo application walkthrough
◦ Q&A
2

3. 3
BEAUTIFUL APPS!

4. “Flutter is Google’s UI toolkit
for building beautiful,
natively compiled
applications for mobile,
web, and desktop from a
single codebase
4

5. Why Flutter?
◦ Beautiful UI
◦ Control every pixel on the screen
◦ Never say "no" to your designer
◦ Stand out in the marketplace
◦ Beautiful animations
◦ Standard (Tween, etc) and Physics-based
5

6. Why Flutter for Developers?
◦ Fast
◦ 60fps
◦ Compiled to native code
◦ Productive
◦ Sub-second reload times (JIT vs AOT)
◦ Iterate rapidly on features
◦ Single-codebase for faster collaboration
◦ Vibrant community & growing
6

7. Flutter is Unique
◦ Compiles to Native Code (ARM Binary code)
◦ No reliance on OEM widgets
◦ No bridge needed
◦ No mark-up language (only Dart)
7

8. What makes it unique?
8
Platform SDKs
Webviews

9. What makes it unique?
9
Reactive
(Flux)

10. Flutter way – Awesome!
10

11. Under the hood
11

12. Flutter Embedders
12
Google Fuchsia
Fuchsia is a capability-based, real-
time operating system (RTOS)
currently being developed by
Google.
No more Java/Dalvik/Oracle
◦ Android
◦ iOS
◦ Desktop
◦ Web
◦ Raspberry Pi
◦ Android Things

13. Daaaaa…Dart?
◦ Open-source web programming
language developed by Google. (By the
guy who wrote v8 – Lars Bak)
◦ Class-based, single-inheritance with
mixins, object oriented language with C-
style syntax.
◦ Supports interfaces, abstract classes,
reified generics, and strong typing
13

14. Dart is easy peasy lemon squeezy
14

15. App Structure/Widgets
15

16. Widgets everywhere
◦ Widgets are immutable
◦ Declarations of parts of
the UI
◦ Like a <div>
◦ A structural element like
a button, menu
◦ A stylistic element like a
font, theme
◦ Part of layout like
padding, center
16

17. Its all widgets
17

18. What kind of Widgets are there?
◦ Generic Widget
◦ Column, Row, Flex, Padding, Opacity, etc.
◦ GestureDetector, Painter, etc.
◦ Material widgets
◦ RaisedButton, FlatButton, InkWell, etc.
◦ FloatingActionButton, etc.
◦ Cupertino widgets
◦ CupertinoActionSheet, CupertinoButton, etc
◦ CupertinoTextField, etc
18

19. 19

20. 20

21. 21
The widget library
The package
manager (pub.dev)

22. 22

23. The Widget Tree
23

24. Most common widgets
◦ Text, Image, Icon – Basic widgets
◦ Container - The div of Flutter UI. It's a convenience widget
that allows you to add padding, alignment, backgrounds,
force sizes on widgets, and boatloads of other things. It also
takes up 0px space when empty, which comes in handy.
◦ Row, Column – Flex rule based
◦ Stack - A stack displays a list of children on top of one and
other.
◦ Scaffold - This is the root of every page in your app, which
gives your app a basic layout structure. It makes it easy to
implement bottom navigations, appBars, back buttons, etc.
24

25. Stateful vs Stateless Widgets
25
BuildContext Class is nothing else but
a reference to the location of a Widget
within the tree structure of all the
Widgets which are built.

26. Stateful Widget Lifecycle
26

27. Flutter for HTML Developers
27

28. State Management
◦ Scoped Model
◦ Provider (Recommended)
◦ Business Logic Component or BLoC (too
complicated)
◦ Mobx
◦ Redux
28

29. Oh one more thing… Physics!!
29

30. Real Assets
30

31. Skeletal Animation
31

32. Trim Paths – Icons/Animations
32

33. Setting it up
33

34. 34

35. Demo time!

36. 36
Thanks!
MetroGuild Pune is hiring!
Flutter/Python/ReactJS Developers
You can find me at:
◦ https://www.linkedin.com/in/arifamirani/
◦ @kontinuity

37. References
◦ https://hackernoon.com/why-flutter-uses-
dart-dd635a054ebf
◦ https://medium.com/saugo360/flutters-
rendering-engine-a-tutorial-part-1-
e9eff68b825d
◦ https://hackernoon.com/whats-
revolutionary-about-flutter-946915b09514
◦ https://medium.com/@ralfgehrer/how-
flutter-works-under-the-hood-and-why-it-
is-game-changing-2335954a5bfc
37