Flutter Talk at CFCamp - Speaker Deck

Slide 1

Slide 1 text

Flutter for Web Android, iOS, Desktop… and Web? Lara Martín @Lariki Flutter/Dart GDE - Android Miguel Beltran @MiBLT Freelance Consultant

Slide 2

Slide 2 text

Flutter for Web Android, iOS, Desktop… and Web? Lara Martín @Lariki Flutter/Dart GDE - Android Miguel Beltran @MiBLT Freelance Consultant

Slide 3

Slide 3 text

What is Flutter? Show me the code! And what about web?

Slide 4

Slide 4 text

What is Flutter? “Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.”

Slide 5

Slide 5 text

FLUTTER Fast Development Expressive and Flexible UI Native Performance Great Community What Makes it Awesome?

Slide 6

Slide 6 text

Fast Development

Slide 7

Slide 7 text

Dart final antennaDiameter = 3.7; var flybyObjects = ['Jupiter', 'Saturn', 'Uranus']; for (var object in flybyObjects) { print(object); } class Spacecraft { String name; toString() => ‘Spacecraft: $name’; }

Slide 8

Slide 8 text

Extensible UI Toolkit

Slide 9

Slide 9 text

Native-like UI

Slide 10

Slide 10 text

Community GitHub Events https://ﬂutterevents.com/

Slide 11

Slide 11 text

Community

Slide 12

Slide 12 text

Programming Flutter

Slide 13

Slide 13 text

Programming Flutter RaisedButton(…)

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Programming Flutter

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Is it Production Ready?™ But keep in mind: It is ‘too’ new ❌ Google can ‘kill’ it Feature limitations Google Maps in Flutter - Sample app

Slide 19

Slide 19 text

Let’s Code

Slide 20

Slide 20 text

Christmas Markets App List Christmas markets available Header with animated snow (Flare) Calendar date picker Load markets from local CSV ﬁle Missing feature: When the user taps a date The app displays the markets available Let’s ﬁx it!

Slide 21

Slide 21 text

Flutter Web

Slide 22

Slide 22 text

Christmas Markets App ???

Slide 23

Slide 23 text

Flutter Web In developer preview Goal: Web support like mobile Not recommended for production yet Demos https://ﬂutter.github.io/samples/

Slide 24

Slide 24 text

Flutter Web Architecture

Slide 25

Slide 25 text

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 - Miniﬁed JS on release KenKen by New York Times

Slide 26

Slide 26 text

What is missing: - No text selection (!!!) - Poor accessibility - UI interaction is “mobile like” (e.g. no scroll) - Poor performance Dataviz Flutter web sample app

Slide 27

Slide 27 text

Making our App Work Change to `channel master` Enable web with `conﬁg --enable-web` Adjust UI for large screen Run with `run -d chrome` …and it worked! kawaiitech.github.io/ﬂutter-xmas

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Out Take

Slide 31

Slide 31 text

My Take (Lara) Easy to learn for everyone Fast and fun Multiplatform Open Source Awesome community

Slide 32

Slide 32 text

My Take (Miguel) Clients love the results Full custom UI Fast and fun Tests everywhere Helpful community Flutter Web is promising

Slide 33

Slide 33 text

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