Flutter for Web - Codemotion Berlin 2019

Flutter for Web - Codemotion Berlin 2019

8f5449e0199b2328460b35108934bcad?s=128

Lara Martín

November 13, 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
  2. Flutter for Web Android, iOS, Desktop… and Web? Lara Martín

    @Lariki Flutter/Dart GDE - Android Miguel Beltran @MiBLT Freelance Consultant
  3. What is Flutter? Show me the code! And what about

    web?
  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.”
  5. FLUTTER Fast Development Expressive and Flexible UI Native Performance Great

    Community What Makes it Awesome?
  6. Fast Development

  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’; }
  8. Extensible UI Toolkit

  9. Native-like UI

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

  11. Community

  12. Programming Flutter

  13. Programming Flutter RaisedButton(…)

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

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

  16. Programming Flutter

  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
  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
  19. Let’s Code

  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!
  21. Flutter Web

  22. Christmas Markets App ???

  23. Flutter Web In developer preview Goal: Web support like mobile

    Not recommended for production yet Demos https://flutter.github.io/samples/
  24. Flutter Web Architecture

  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
  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
  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
  28. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>xmas</title> </head> <body> <script

    src="main.dart.js" type=“application/javascript"> </script> </body> </html> Flutter’s index.html
  29. Making our App Work Code changes Remove snow animation Adjust

    UI for large screen Run with `run -d chrome` …and it worked!
  30. None
  31. None
  32. Deploying to GitHub Pages $ flutter pub global run peanut

    kawaiitech.github.io/flutter-xmas
  33. None
  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
  35. Out Take

  36. My Take (Lara) Easy to learn for everyone Fast and

    fun Multiplatform Open Source Awesome community
  37. My Take (Miguel) Clients love the results Full custom UI

    Fast and fun Tests everywhere Helpful community Flutter Web is promising
  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