Flutter for Web - Codemotion Berlin 2019

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

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

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

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

Fast Development

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

Extensible UI Toolkit

Native-like UI

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

Community

Programming Flutter

Programming Flutter RaisedButton(…)

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

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

Programming Flutter

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

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

Let’s Code

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!

Flutter Web

Christmas Markets App ???

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

Flutter Web Architecture

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

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

Making our App Work 1. Change to `channel master` 2.
Enable web with `conﬁg —enable-web` 3. Reinit the project with web support This created a `web` folder with an index.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>xmas</title> </head> <body> <script
src="main.dart.js" type=“application/javascript"> </script> </body> </html> Flutter’s index.html

Making our App Work Code changes Remove snow animation Adjust
UI for large screen Run with `run -d chrome` …and it worked!

Deploying to GitHub Pages $ flutter pub global run peanut
kawaiitech.github.io/ﬂutter-xmas

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

Out Take

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

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

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

Flutter for Web - Codemotion Berlin 2019

Flutter for Web - Codemotion Berlin 2019

More Decks by Miguel Beltran

Other Decks in Technology

Featured

Transcript