$30 off During Our Annual Pro Sale. View Details »

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

Ian Rumac
December 04, 2018

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.

Ian Rumac

December 04, 2018
Tweet

More Decks by Ian Rumac

Other Decks in Programming

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