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

Flutter for Web: Beautiful Apps and Websites with a Single Codebase

Flutter for Web: Beautiful Apps and Websites with a Single Codebase

Flutter talk given at CFCamp 2019
https://www.cfcamp.org/sessions/flutter-for-web.html

Lara Martín

October 17, 2019
Tweet

More Decks by Lara Martín

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. 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 Slide

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

    View Slide

  5. Fast Development

    View Slide

  6. 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 Slide

  7. Extensible UI Toolkit

    View Slide

  8. Native-like UI

    View Slide

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

    View Slide

  10. Community

    View Slide

  11. Programming Flutter

    View Slide

  12. Programming Flutter
    RaisedButton(…)

    View Slide

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

    View Slide

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

    View Slide

  15. Programming Flutter

    View 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 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 Slide

  18. Let’s Code

    View 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 Slide

  20. Flutter Web

    View Slide

  21. Christmas Markets App
    ???

    View Slide

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

    View Slide

  23. Flutter Web Architecture

    View Slide

  24. 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 Slide

  25. 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 Slide

  26. 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 Slide

  27. View Slide

  28. 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 Slide

  29. Out Take

    View Slide

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

    View Slide

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

    View Slide

  32. 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 Slide