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

1. View Slide

2. What the flut(ter)?
   Ian Rumac
   Android Architect @ Undabot
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

5. Crossplatform? Ugh, again?
   Haven’t we decided it sucks?
   

   View Slide

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
   

   View Slide

7. So this time..
   

   View Slide

8. Flutter 101
   Widgets: Stateless
   • Properties passed to Widget
   • No state management
   • Can’t be simpler
   

   View Slide

9. Flutter 101
   Widgets: Stateful
   • Have state containers
   • Are redrawn on setState
   • State management is left to you
   

   View Slide

10. Platform Channels
    (NOT THE SAME AS KOTLIN CHANNELS)
    

    View Slide

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
    

    View Slide

12. So..
    AND our UI LAYER IN FLUTTER…
    WITH platform channels
    WE CAN DO….
    

    View Slide

13. View Slide

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
    
    

    View Slide

15. Flutter (View)
    Events
    Router
    (Handler)
    “Logic”
    “Presenter”
    Data
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. Warning:
    FLASHING COLORS
    
    

    View Slide

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
    

    View Slide

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)
    +: -:
    

    View Slide

22. Thank you for your time!
    Ian Rumac
    Android Architect @Undabot
    

    View Slide