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
   

   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