Flutter for Web - Codemotion Berlin 2019

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