Flutter Talk at CFCamp

72ffb135de71bef2c4a11961634edc6a?s=47 Miguel Beltran
October 17, 2019
140

Flutter Talk at CFCamp

72ffb135de71bef2c4a11961634edc6a?s=128

Miguel Beltran

October 17, 2019
Tweet

Transcript

  1. 1.

    Flutter for Web Android, iOS, Desktop… and Web? Lara Martín

    @Lariki Flutter/Dart GDE - Android Miguel Beltran @MiBLT Freelance Consultant
  2. 2.

    Flutter for Web Android, iOS, Desktop… and Web? Lara Martín

    @Lariki Flutter/Dart GDE - Android Miguel Beltran @MiBLT Freelance Consultant
  3. 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.”
  4. 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’; }
  5. 11.
  6. 17.

    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
  7. 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
  8. 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!
  9. 23.

    Flutter Web In developer preview Goal: Web support like mobile

    Not recommended for production yet Demos https://flutter.github.io/samples/
  10. 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
  11. 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
  12. 27.

    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
  13. 28.
  14. 29.
  15. 30.
  16. 31.

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

    fun Multiplatform Open Source Awesome community
  17. 32.

    My Take (Miguel) Clients love the results Full custom UI

    Fast and fun Tests everywhere Helpful community Flutter Web is promising
  18. 33.

    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