A short intro to Google's Flutter UI framework.

1. #HelloWorld
A short introduction to Flutter, Google’s cross-platform
UI framework.
@flschweiger
Frederik Schweiger

2. Flutter is a
cross-platform
UI framework.

5. Challenges of mobile development today
“To the metal” approaches “Cross platform” approaches
Must fund two apps
Two teams, codebases, & investments
Inconsistent brand, features
Different across devices & OEMs
Poor Performance
Slow, jerky, unpredictable
Non-Native Look/Feel
Users can tell the difference
High-quality apps
Platform and system integrations
Fast development
Quick iterations, hot reload
High-performance UIs
Native code, GPU accelerated
Portability, reach
Single codebase

6. The Flutter approach
Fast development
Quick iterations, hot reload
High-quality apps
Platform and system integrations
High-performance UIs
Native code, GPU accelerated
Portability, reach
Single codebase

7. Why it’s different to other solutions

8. A modern UI toolkit for native apps
Framework
(Dart)
Engine
(C++) Skia Dart Text
Material Cupertino
Widgets
Rendering
Animation Painting Gestures
Foundation
Flutter app
(client)
State
MethodChannel
iOS host
Android host
AppDelegat
e
Activity
FlutterViewController
FlutterView
iOS
Platform
APIs
3rd-Party
APIs for
iOS
Android
Platform
APIs
3rd-Party
APIs for
Android

9. Show me some
Flutter!

10. 100%
Flutter
so
much
WOW

11. 100%
Flutter
so
much
WOW 100%
custom rendering

13. Awesome performance!

14. There’s more!

16. What’s the point in custom rendering?

17. That’s the point.

19. Building UIs:
It’s all
widgets!

20. It’s all
widgets!
the only building block
everything is a widget
the app is a widget
each screen is a widget
widgets are made out of widgets

22. Stateful &
Stateless.

23. Lesson 1: Stateless Widgets Have NO
state.(who guessed that?)
Are IMmutable.

24. Lesson 2: Stateful Widgets
Have a state.
Have mutable instance fields.
Use setState() to notify for UI
updates.

25. Have mutable instance fields.
Use setState() to notify for UI
updates.

26. Live Coding.

27. That all sounds
super nice but what
about platform
native stuff?

28. Native Plugins
● Allow access to every native platform API
→ Bluetooth, Geolocation, Sensors, Fingerprint, Camera, etc…
● Official and community driven plugins available
● All Firebase Features are supported by Google
● Most common features like GPS, Camera, Sensors are already
implemented by Google and the community, check out pub.dartlang.org
● If a plugin does not exist out-of-the-box, it’s easy to write your own

29. Works with popular tools and platforms!
Material Design
FirebaseVS CodeAndroid Studio
Android APIs iOS APIs Redux
Xcode
3rd-party
Android
SDKs
3rd-party
iOS SDKs

30. Demo Time.

31. Thank you!