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

Transcript

1. Flutter for Web Android, iOS, Desktop… and Web? Lara Martín @Lariki Flutter/Dart GDE - Android Miguel Beltran @MiBLT Freelance Consultant
2. What is Flutter? Show me the code! And what about web?
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.”
4. FLUTTER Fast Development Expressive and Flexible UI Native Performance Great Community What Makes it Awesome?
5. Fast Development
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’; }
7. Extensible UI Toolkit
8. Native-like UI
9. Community GitHub Events https://flutterevents.com/
10. Community
11. Programming Flutter
12. Programming Flutter RaisedButton(…)
13. Programming Flutter RaisedButton( child: Text(‘Tap me’), )
14. Programming Flutter Center( child: RaisedButton( child: Text(‘Tap me’), ), )
15. Programming Flutter
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
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
18. Let’s Code
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!
20. Flutter Web
21. Christmas Markets App ???
22. Flutter Web In developer preview Goal: Web support like mobile Not recommended for production yet Demos https://flutter.github.io/samples/
23. Flutter Web Architecture
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
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
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
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
29. Out Take
30. My Take (Lara) Easy to learn for everyone Fast and fun Multiplatform Open Source Awesome community
31. My Take (Miguel) Clients love the results Full custom UI Fast and fun Tests everywhere Helpful community Flutter Web is promising
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