Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter Web : où en sommes nous ?

Flutter Web : où en sommes nous ?

Au mois de décembre 2019, Google a annoncé que Flutter Web (anciennement Hummingbird) était disponible en version bêta.

Au cours de cette présentation, nous allons voir ce qu'il est possible de faire aujourd'hui, mais aussi les limitations et leurs impacts.

Cette présentation a été donnée lors de la session de janvier 2020 au Flutter Paris.

081b06f3d680a58d45bf672c0dfa0a6a?s=128

Edouard Marquez

January 29, 2020
Tweet

Transcript

  1. Flutter pour le Web Edouard Marquez (Développeur freelance Flutter &

    Android)
  2. !u#er-conf.paris

  3. Flutter pour le Web flutter.paris/questions Quelles plateformes Flutter supporte-t-il ?

    Framework permettant de concevoir des applications multiplateforme “ “
  4. Flutter pour le Web flutter.paris/questions Quelles plateformes Flutter supporte-t-il ?

    Framework permettant de concevoir des applications multiplateforme Embarqué Ex : Nest Hub Max “ “ Ordinateurs Windows, Mac, Linux ALPHA Web BETA Smartphones Android et iOS STABLE
  5. Flutter pour le Web flutter.paris/questions Flutter Web est relativement récent

    Annonce de Hummingbird Aucun code mis à disposition, juste une note d’intention avec les essais de l’équipe Flutter quant à leurs choix 04 décembre 2018 Flutter Live
  6. Flutter pour le Web flutter.paris/questions Flutter Web est relativement récent

    Annonce de Hummingbird Aucun code mis à disposition, juste une note d’intention avec les essais de l’équipe Flutter quant à leurs choix 04 décembre 2018 Flutter Live Hummingbird devient Flutter Web Projet testable par tous, mais en Developer Preview 07 mai 2019 Google I/O 19
  7. Flutter pour le Web flutter.paris/questions Flutter Web est relativement récent

    Annonce de Hummingbird Aucun code mis à disposition, juste une note d’intention avec les essais de l’équipe Flutter quant à leurs choix 04 décembre 2018 Flutter Live Hummingbird devient Flutter Web Projet testable par tous, mais en Developer Preview 07 mai 2019 Google I/O 19 Flutter Web passe en bêta Le projet est suffisamment mature pour être qualifié de bêta 11 décembre 2019 Flutter Interact
  8. Flutter pour le Web flutter.paris/questions Disponible en bêta (channel) =>

    flutter channel beta => flutter upgrade => flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel beta, v1.13.6, on Mac OS X 10.15.2 19C57, locale en-FR)
  9. Flutter pour le Web flutter.paris/questions Utiliser FVM pour gérer les

    channels de Flutter FVM Flutter Version Management Plusieurs channels Mise à jour simplifiée Par projet Lien vers le bon environnement
  10. Développer son application Depuis un IDE ou en ligne de

    commande Déployer son site Firebase Hosting, GitHub pages… Qu’est-ce qui fonctionne ? En Flutter Web Chrome pour développer Mais tous les navigateurs en release Déboguer Chrome Dev Tools + Dart/Flutter Dev Tools
  11. Une démo, une démo ! Site de démo https://g123k.github.io/ flutter_web_showcase/

    Invoice Ninja https://hillelcoren.github.io/ invoiceninja/
  12. Flutter pour le Web flutter.paris/questions Un Hello World combien ça

    pèse ? D'autres outils Chrome DevTools https://g123k.github.io/flutter_web_hello_world/
  13. Flutter pour le Web flutter.paris/questions Un Hello World combien ça

    pèse ? D'autres outils Chrome DevTools main.dart.js Fichier de 1 Mo / 300 ko GZippé https://g123k.github.io/flutter_web_hello_world/
  14. Flutter pour le Web flutter.paris/questions Un Hello World combien ça

    pèse ? D'autres outils Chrome DevTools main.dart.js Fichier de 1 Mo / 300 ko GZippé JS + assets 408 ko https://g123k.github.io/flutter_web_hello_world/
  15. Flutter pour le Web flutter.paris/questions Qu'en pense Google ? PageSpeed

    Insights Equivalent à Lighthouse Sur ordinateur Pas de problème
  16. Flutter pour le Web flutter.paris/questions Qu'en pense Google ? PageSpeed

    Insights Equivalent à Lighthouse Sur ordinateur Pas de problème Sur mobile Des améliorations à faire
  17. Flutter pour le Web flutter.paris/questions Et le SEO ?

  18. Flutter pour le Web flutter.paris/questions Et le SEO ?

  19. Les différences

  20. Flutter pour le Web flutter.paris/questions Toujours du Flutter… mais dans

    un navigateur Peut s'exécuter sur plusieurs navigateurs Safari, Firefox, Chrome… Set de technologies différentes CSS, Javascript… Usages différents Clavier / souris, layout responsive, mais parfois aussi du tactile CORS Restrictions qui n'existent pas sur mobile (Cross-Origin Resource Sharing)
  21. Flutter pour le Web flutter.paris/questions Des APIs différentes ui Communes

    async core collection typed_data developer convert math wasm Mobile / Desktop ffi io isolate js Web js_util html web_audio web_gl indexed_db web_sql svg hips://github.com/juier/juier/issues/39998
  22. Flutter pour le Web flutter.paris/questions Avec quelques limitations (temporaires) Certains

    composants Flutter ne fonctionnent pas Bugs graphiques, shaders… Locale Pour le moment, retourne toujours 'en' Pas de Hot Reload Uniquement du Hot Restart
  23. Communication avec la page web

  24. Flutter pour le Web flutter.paris/questions Modifier dynamiquement le titre de

    la page js Web js_util html web_audio web_gl indexed_db web_sql svg
  25. Flutter pour le Web flutter.paris/questions Modifier dynamiquement le titre de

    la page import 'dart:html' as html; class TestWidget extends StatelessWidget { @override Widget build(BuildContext context) { return OutlineButton( child: Text('Changer le titre de la page'), onPressed: () { html.document.title = 'Nouveau titre'; }, ); } }
  26. Flutter pour le Web flutter.paris/questions Modifier dynamiquement le titre de

    la page import 'dart:html' as html; class TestWidget extends StatelessWidget { @override Widget build(BuildContext context) { return OutlineButton( child: Text('Changer le titre de la page'), onPressed: () { html.document.title = 'Nouveau titre'; }, ); } }
  27. Les plugins

  28. Flutter pour le Web flutter.paris/questions (Uniquement) six packages supportés google_sign_in

    url_launcher video_player shared_preferences firebase_core firebase_auth
  29. Flutter pour le Web flutter.paris/questions Pub affiche maintenant la compatibilité

    web
  30. Flutter pour le Web flutter.paris/questions Pub affiche maintenant la compatibilité

    web
  31. Flutter pour le Web flutter.paris/questions Une nouvelle manière de créer

    les plugins name: url_launcher description: Flutter plugin for launching a URL on Android and iOS. Supports web, phone, SMS, and email schemes. homepage: https://github.com/flutter/plugins/tree/master/packages/url_launcher/url_launcher version: 5.4.1 flutter: plugin: platforms: android: package: io.flutter.plugins.urllauncher pluginClass: UrlLauncherPlugin ios: pluginClass: FLTURLLauncherPlugin web: default_package: url_launcher_web macos: default_package: url_laucher_macos
  32. Flutter pour le Web flutter.paris/questions 1 plugin = 4 projets

    !
  33. Flutter pour le Web flutter.paris/questions 1 plugin = 4 projets

    ! Interface commune
  34. Flutter pour le Web flutter.paris/questions 1 plugin = 4 projets

    ! Interface commune Plugin mobile Android et iOS Plugin MacOS Plugin Web
  35. Flutter pour le Web flutter.paris/questions ⚠ Pub indique que les

    anciens packages sont forcément compatibles web
  36. Platform views

  37. Flutter pour le Web flutter.paris/questions Utiliser FVM pour gérer les

    channels de Flutter HtmlElementView Similaire à AndroidView et UiKitView Démo webcam https://flutter- webcam.firebaseapp.com/#/
  38. La navigation

  39. Flutter pour le Web flutter.paris/questions La barre d'adresse : un

    nouveau composant à prendre en compte
  40. Flutter pour le Web flutter.paris/questions La barre d'adresse : un

    nouveau composant à prendre en compte Navigator.of(context).pushNamed('/page2');
  41. Flutter pour le Web flutter.paris/questions La barre d'adresse : un

    nouveau composant à prendre en compte Navigator.of(context).pushNamed('/page2'); return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue), routes: <String, WidgetBuilder>{ '/': (_) => Page1(), '/page2': (_) => Page2(), '/page3': (_) => Page3(), }, );
  42. Flutter pour le Web flutter.paris/questions La barre d'adresse : gérer

    les erreurs Sans gestion d'erreur
  43. Flutter pour le Web flutter.paris/questions La barre d'adresse : gérer

    les erreurs Sans gestion d'erreur Avec gestion d'erreur
  44. Flutter pour le Web flutter.paris/questions La barre d'adresse : gérer

    les erreurs Avec gestion d'erreur return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue), routes: <String, WidgetBuilder>{ '/': (_) => Page1(), '/page2': (_) => Page2(), '/page3': (_) => Page3(), }, onUnknownRoute: (RouteSettings route) { return MaterialPageRoute( settings: route, builder: (_) => ErrorPage(route.name)); } )
  45. Flutter pour le Web flutter.paris/questions La barre d'adresse : gérer

    les arguments Argument dans la barre d'adresse return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue), onGenerateRoute: (RouteSettings route) { switch (route.name) { case '/page2': return MaterialPageRoute( settings: route, builder: (_) => Page2()); case '/page3': return MaterialPageRoute( settings: route, builder: (_) => Page2(route.arguments));
  46. Flutter pour le Web flutter.paris/questions La barre d'adresse : gérer

    les arguments Argument dans la barre d'adresse return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue), onGenerateRoute: (RouteSettings route) { switch (route.name) { case '/page2': return MaterialPageRoute( settings: route, builder: (_) => Page2()); case '/page3': return MaterialPageRoute( settings: route, builder: (_) => Page2(route.arguments)); route.name = '/page3?val=2' route.arguments = null
  47. Mais aussi

  48. Flutter pour le Web flutter.paris/questions Flutter Web Driver supporté

  49. Flutter pour le Web flutter.paris/questions On peut l'utiliser les animations

    Rive
  50. Flutter pour le Web flutter.paris/questions On peut l'utiliser comme extension

    Chrome Rody Davis @rodydavis 18:17 - 21 Novembre 2019 Why yes you can make @FlutterDev web Google Chrome Extensions that can execute js on the host page
  51. Et les PWA ?

  52. None
  53. 1 Créer et copier le fichier manifest.json hips://app-manifest.prebaseapp.com/

  54. 1 Créer et copier le fichier manifest.json hips://app-manifest.prebaseapp.com/ 2 Créer

    les favicons et insérer le code html hips://app-manifest.prebaseapp.com/
  55. 1 Créer et copier le fichier manifest.json hips://app-manifest.prebaseapp.com/ 2 Créer

    les favicons et insérer le code html hips://app-manifest.prebaseapp.com/ 3 Modifier le fichier index.html pour faire référence au service worker </body> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('flutter_service_worker.js'); } </script>
  56. Merci ! @g123k @FlutterFr

  57. None
  58. 02 juin 2020 Impasse Lamier (11ème)

  59. 02 juin 2020 1 journée avec 2 tracks Billets à

    parir de 35€
  60. !u#er-conf.paris