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

Flutter for Web - Codemotion Berlin 2019

Flutter for Web - Codemotion Berlin 2019

Lara Martín

November 13, 2019
Tweet

More Decks by Lara Martín

Other Decks in Technology

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. Flutter for Web
    Android, iOS, Desktop… and Web?
    Lara Martín
    @Lariki
    Flutter/Dart GDE - Android
    Miguel Beltran
    @MiBLT
    Freelance Consultant

    View Slide

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

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

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

    View Slide

  6. Fast Development

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

  8. Extensible UI Toolkit

    View Slide

  9. Native-like UI

    View Slide

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

    View Slide

  11. Community

    View Slide

  12. Programming Flutter

    View Slide

  13. Programming Flutter
    RaisedButton(…)

    View Slide

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

    View Slide

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

    View Slide

  16. Programming Flutter

    View Slide

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

    View Slide

  18. 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

  19. Let’s Code

    View Slide

  20. 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

  21. Flutter Web

    View Slide

  22. Christmas Markets App
    ???

    View Slide

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

    View Slide

  24. Flutter Web Architecture

    View Slide

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

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

  27. Making our App Work
    1. Change to `channel master`
    2. Enable web with `config —enable-web`
    3. Reinit the project with web support
    This created a `web` folder with an
    index.html

    View Slide





  28. xmas


    type=“application/javascript">



    Flutter’s index.html

    View Slide

  29. Making our App Work
    Code changes
    Remove snow animation
    Adjust UI for large screen
    Run with `run -d chrome`
    …and it worked!

    View Slide

  30. View Slide

  31. View Slide

  32. Deploying to GitHub Pages
    $ flutter pub global run peanut
    kawaiitech.github.io/flutter-xmas

    View Slide

  33. View Slide

  34. 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

  35. Out Take

    View Slide

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

    View Slide

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

    View Slide

  38. 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