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

Flutter Web : que peut-on faire aujourd'hui ?

Flutter Web : que peut-on faire aujourd'hui ?

Présentation au Devfest Paris 2020

081b06f3d680a58d45bf672c0dfa0a6a?s=128

Edouard Marquez

February 14, 2020
Tweet

Transcript

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

    Android)
  2. Flutter pour le Web Devfest Paris 2020 Quelles plateformes Flutter

    supporte-t-il ? Framework permettant de concevoir des applications multiplateforme “ “
  3. Flutter pour le Web Devfest Paris 2020 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
  4. Flutter pour le Web Devfest Paris 2020 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
  5. Flutter pour le Web Devfest Paris 2020 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
  6. Une démo, une démo ! Site de démo https://g123k.github.io/ flutter_web_showcase/

    Invoice Ninja https://hillelcoren.github.io/ invoiceninja/
  7. 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
  8. Flutter pour le Web Devfest Paris 2020 La génération d’une

    “application” Flutter Web Code Flutter (Dart)
  9. Flutter pour le Web Devfest Paris 2020 La génération d’une

    “application” Flutter Web Code Flutter (Dart) dart2js
  10. Flutter pour le Web Devfest Paris 2020 La génération d’une

    “application” Flutter Web Code Flutter (Dart) main.dart.js dart2js
  11. Flutter pour le Web Devfest Paris 2020 La génération d’une

    “application” Flutter Web Code Flutter (Dart) Assets main.dart.js dart2js
  12. Flutter pour le Web Devfest Paris 2020 La génération d’une

    “application” Flutter Web Code Flutter (Dart) Assets main.dart.js dart2js index.html main.dart.js assets/
  13. Flutter pour le Web Devfest Paris 2020 Un Hello World

    combien ça pèse ? D'autres outils Chrome DevTools https://g123k.github.io/flutter_web_hello_world/
  14. Flutter pour le Web Devfest Paris 2020 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/
  15. Flutter pour le Web Devfest Paris 2020 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/
  16. Flutter pour le Web Devfest Paris 2020 Qu'en pense Google

    ? PageSpeed Insights Equivalent à Lighthouse Sur ordinateur Pas de problème
  17. Flutter pour le Web Devfest Paris 2020 Qu'en pense Google

    ? PageSpeed Insights Equivalent à Lighthouse Sur ordinateur Pas de problème Sur mobile Des améliorations à faire
  18. Flutter pour le Web Devfest Paris 2020 Et le SEO

    ?
  19. Flutter pour le Web Devfest Paris 2020 Et le SEO

    ?
  20. Les différences

  21. Flutter pour le Web Devfest Paris 2020 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 hgps://github.com/huger/huger/issues/39998
  22. Flutter pour le Web Devfest Paris 2020 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)
  23. Flutter pour le Web Devfest Paris 2020 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
  24. Communication avec la page web

  25. Flutter pour le Web Devfest Paris 2020 Modifier dynamiquement le

    titre de la page js Web js_util html web_audio web_gl indexed_db web_sql svg
  26. Flutter pour le Web Devfest Paris 2020 Modifier dynamiquement le

    titre de la page js Web js_util html web_audio web_gl indexed_db web_sql svg
  27. Flutter pour le Web Devfest Paris 2020 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'; }, ); } }
  28. Flutter pour le Web Devfest Paris 2020 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'; }, ); } }
  29. Les plugins

  30. Flutter pour le Web Devfest Paris 2020 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
  31. Flutter pour le Web Devfest Paris 2020 Pub affiche maintenant

    la compatibilité web
  32. Flutter pour le Web Devfest Paris 2020 Pub affiche maintenant

    la compatibilité web
  33. Flutter pour le Web Devfest Paris 2020 ⚠ Pub indique

    que les anciens packages sont forcément compatibles web
  34. Platform views

  35. Flutter pour le Web Devfest Paris 2020 Utiliser FVM pour

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

  37. Flutter pour le Web Devfest Paris 2020 La barre d'adresse

    : un nouveau composant à prendre en compte
  38. Flutter pour le Web Devfest Paris 2020 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(), }, );
  39. Flutter pour le Web Devfest Paris 2020 La barre d'adresse

    : gérer les erreurs Avec gestion d'erreur
  40. Flutter pour le Web Devfest Paris 2020 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)); } )
  41. Mais aussi

  42. Flutter pour le Web Devfest Paris 2020 Flutter Web Driver

    supporté
  43. Flutter pour le Web Devfest Paris 2020 On peut l'utiliser

    les animations Rive
  44. Flutter pour le Web Devfest Paris 2020 On peut l'utiliser

    les animations Rive
  45. Flutter pour le Web Devfest Paris 2020 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
  46. Et les PWA ?

  47. None
  48. None
  49. Faut-il passer à Flutter Web ? “ “

  50. Merci ! @g123k @FlutterFr

  51. Et la taille ?

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

    Android)
  53. Flutter pour le Web Devfest Paris 2020 La stack Flutter

    Material Cupertino Widgets Rendering Fondation Animation Painting Gestures Framework (Dart) Skia Dart Text Engine (C++)
  54. Flutter pour le Web Devfest Paris 2020 La stack Flutter

    Web Material Cupertino Widgets Rendering Fondation Animation Painting Gestures Framework (Dart) Canvas JS Engine DOM Navigateur
  55. Faut-il passer à Flutter Web ? “ “

  56. Flutter pour le Web Devfest Paris 2020 La barre d'adresse

    : gérer les arguments Envoi de 42 comme argument
  57. Flutter pour le Web Devfest Paris 2020 La barre d'adresse

    : gérer les arguments Envoi de 42 comme argument
  58. Flutter pour le Web Devfest Paris 2020 La barre d'adresse

    : gérer les arguments Envoi de 42 comme argument Navigator.of(context) .pushNamed( '/page2', arguments : 42 );
  59. Flutter pour le Web Devfest Paris 2020 La barre d'adresse

    : gérer les arguments Envoi de 42 comme argument 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: (_) => Page3(route.arguments));
  60. Flutter pour le Web Devfest Paris 2020 Plusieurs channels en

    parallèle Remplacer le channel existant Solution 1
  61. Flutter pour le Web Devfest Paris 2020 Plusieurs channels en

    parallèle Remplacer le channel existant Un dossier par channel Modifier le path du SDK Solution 1 Solution 2
  62. Flutter pour le Web Devfest Paris 2020 Plusieurs channels en

    parallèle Warning! The 'flutter' tool you are currently running is from a different Flutter repository than the one last used by this package. The repository from which the 'flutter' tool is currently executing will be used instead. running Flutter tool: /Users/g123k/Documents/flutter_beta previous reference : /Users/g123k/Documents/flutter_stable This can happen when you have multiple copies of flutter installed. Please check your system path to verify that you are running the expected version (run 'flutter --version' to see which flutter is on your path).
  63. Hot Restart Faire des modifications en relançant l’application Développer son

    application Depuis un IDE ou en ligne de commande Déboguer Chrome Dev Tools + Flutter Web Tools Déployer son site Firebase Hosting, GitHub pages… Qu’est-ce qui fonctionne ? En Flutter Web
  64. 1 Créer et copier le fichier manifest.json hgps://app-manifest.rrebaseapp.com/

  65. 1 Créer et copier le fichier manifest.json hgps://app-manifest.rrebaseapp.com/ 2 Créer

    les favicons et insérer le code html hgps://app-manifest.rrebaseapp.com/
  66. 1 Créer et copier le fichier manifest.json hgps://app-manifest.rrebaseapp.com/ 2 Créer

    les favicons et insérer le code html hgps://app-manifest.rrebaseapp.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>
  67. Flutter pour le Web Devfest Paris 2020 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)
  68. Flutter pour le Web Devfest Paris 2020 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
  69. Flutter pour le Web Devfest Paris 2020 (Uniquement) six packages

    supportés google_sign_in url_launcher video_player shared_preferences firebase_core firebase_auth
  70. Flutter pour le Web Devfest Paris 2020 1 plugin =

    4 projets !
  71. Flutter pour le Web Devfest Paris 2020 1 plugin =

    4 projets ! Interface commune
  72. Flutter pour le Web Devfest Paris 2020 1 plugin =

    4 projets ! Interface commune Plugin mobile Android et iOS Plugin MacOS Plugin Web
  73. Flutter pour le Web Devfest Paris 2020 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));
  74. Flutter pour le Web Devfest Paris 2020 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