Flutter Live Zagreb 2018 - What the Flut(ter)!?

A talk held at Flutter Live viewing party/meetup in Zagreb and later on Flutter ZG meetup.

Focused on basics of Flutter and idea of using Flutter just as a UI toolkit for your existing app logic via channels.

Transcript

2. What the flut(ter)? Ian Rumac Android Architect @ Undabot
3. What’s this.. flutter thingy? • Crossplatform mobile SDK • Based on Dart(lang) • Developed to make mobile development faster • Developed by the brains behind Webkit, HTML5 & tons of other stuff.
4. Dart? • Developed by Google, (ab)used by Google • Year over year one of the fastest growing languages • JIT & AOT • Static but dynamic • Expressive and portable
5. Crossplatform? Ugh, again? Haven’t we decided it sucks?
6. Yeah, but.. this time it’s different! • Different approach to rendering • No bridges to native components • Draws a custom view on a Canvas • UI is structured as a tree • Composition over inheritance • Only subtrees that have changed state are redrawn
7. So this time..
8. Flutter 101 Widgets: Stateless • Properties passed to Widget • No state management • Can’t be simpler
9. Flutter 101 Widgets: Stateful • Have state containers • Are redrawn on setState • State management is left to you
10. Platform Channels (NOT THE SAME AS KOTLIN CHANNELS)
11. • Protocol to establish platform <-> flutter communication • Binary serialization of messages • Support async messaging via await, Future • Can invoke methods and return responses • Can pass arguments and data Platform Channels
12. So.. AND our UI LAYER IN FLUTTER… WITH platform channels WE CAN DO….
14. What do you mean, magic? • We love Kotlin • We love the Kotlin ecosystem • We’re following clean’n’solid principles • UI development on Android is slow and painful • UI development in Flutter is fast and easy
15. Flutter (View) Events Router (Handler) “Logic” “Presenter” Data
19. Warning: FLASHING COLORS
20. 1. Button widget calls native method
 channel 2. Kotlin calls coordinator
 … 3. API returns response 4. Data is multiplied by random 
 and shuffled 5. Data is serialised to JSON 6. JSON is sent through channel 7. JSON is deserialised in Flutter 8. Flutter changes state of component
21. • Easy UI writing • Great rendering pipeline • Hot reload • Great language • Composability • Rendering approach • Portability • Need to learn dart • Dart Ecosystem • APK Size (not really) +: -:
22. Thank you for your time! Ian Rumac Android Architect @Undabot