Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter Talk at CFCamp

Miguel Beltran
October 17, 2019
430

Flutter Talk at CFCamp

Miguel Beltran

October 17, 2019
Tweet

Transcript

  1. Flutter for Web
    Android, iOS, Desktop… and Web?
    Lara Martín
    @Lariki
    Flutter/Dart GDE - Android
    Miguel Beltran
    @MiBLT
    Freelance Consultant

    View full-size slide

  2. Flutter for Web
    Android, iOS, Desktop… and Web?
    Lara Martín
    @Lariki
    Flutter/Dart GDE - Android
    Miguel Beltran
    @MiBLT
    Freelance Consultant

    View full-size slide

  3. What is Flutter?
    Show me the code!
    And what about web?

    View full-size slide

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

    View full-size slide

  5. FLUTTER
    Fast
    Development
    Expressive and
    Flexible UI
    Native
    Performance
    Great
    Community
    What Makes it Awesome?

    View full-size slide

  6. Fast Development

    View full-size slide

  7. Dart
    final antennaDiameter = 3.7;
    var flybyObjects = ['Jupiter', 'Saturn', 'Uranus'];
    for (var object in flybyObjects) {
    print(object);
    }
    class Spacecraft {
    String name;
    toString() => ‘Spacecraft: $name’;
    }

    View full-size slide

  8. Extensible UI Toolkit

    View full-size slide

  9. Native-like UI

    View full-size slide

  10. Community
    GitHub Events
    https://flutterevents.com/

    View full-size slide

  11. Programming Flutter

    View full-size slide

  12. Programming Flutter
    RaisedButton(…)

    View full-size slide

  13. Programming Flutter
    RaisedButton(
    child: Text(‘Tap me’),
    )

    View full-size slide

  14. Programming Flutter
    Center(
    child: RaisedButton(
    child: Text(‘Tap me’),
    ),
    )

    View full-size slide

  15. Programming Flutter

    View full-size slide

  16. Is it Production Ready?™
    Companies that use Flutter
    Alibaba
    Groupon
    Lenovo
    eBay
    Phillips
    realtor.com
    PolicyGenius
    BMW
    Tencent
    Abbey Road Studios
    Google (Ads app)
    New York Times
    Capital One
    …and more!
    Topline by Abbey Road Studios

    View full-size slide

  17. Is it Production Ready?™
    But keep in mind:
    It is ‘too’ new
    ❌ Google can ‘kill’ it
    Feature limitations
    Google Maps in Flutter - Sample app

    View full-size slide

  18. Let’s Code

    View full-size slide

  19. Christmas Markets App
    List Christmas markets available
    Header with animated snow (Flare)
    Calendar date picker
    Load markets from local CSV file
    Missing feature:
    When the user taps a date
    The app displays the markets available
    Let’s fix it!

    View full-size slide

  20. Christmas Markets App
    ???

    View full-size slide

  21. Flutter Web
    In developer preview
    Goal: Web support like mobile
    Not recommended for production yet
    Demos https://flutter.github.io/samples/

    View full-size slide

  22. Flutter Web Architecture

    View full-size slide

  23. What Works:
    - Build and serve websites with Flutter
    - Dart plugins
    - Loading custom fonts
    - Image assets and icons
    - Good UX just like in mobile
    - Chrome, Safari and Edge
    - Hot reload on debug
    - Minified JS on release
    KenKen by New York Times

    View full-size slide

  24. What is missing:
    - No text selection (!!!)
    - Poor accessibility
    - UI interaction is “mobile like” (e.g. no
    scroll)
    - Poor performance
    Dataviz Flutter web sample app

    View full-size slide

  25. Making our App Work
    Change to `channel master`
    Enable web with `config --enable-web`
    Adjust UI for large screen
    Run with `run -d chrome`
    …and it worked!
    kawaiitech.github.io/flutter-xmas

    View full-size slide

  26. Resources
    Code Repo: https://github.com/KawaiiTech/flutter-xmas
    Web Demo: kawaiitech.github.io/flutter-xmas
    Flutter Web Demos: https://flutter.github.io/samples/
    Flutter Web Basics: https://flutter.dev/web

    View full-size slide

  27. My Take (Lara)
    Easy to learn for everyone
    Fast and fun
    Multiplatform
    Open Source
    Awesome community

    View full-size slide

  28. My Take (Miguel)
    Clients love the results
    Full custom UI
    Fast and fun
    Tests everywhere
    Helpful community
    Flutter Web is promising

    View full-size slide

  29. Thank You!
    L a r a M a r t í n
    F l u t t e r G D E
    A n d r o i d D e v e l o p e r
    @ L a r i k i
    M i g u e l B e l t r a n
    F r e e l a n c e
    C o n s u l t a n t
    @ M i B LT

    View full-size slide