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

Introduction à Flutter

Introduction à Flutter

081b06f3d680a58d45bf672c0dfa0a6a?s=128

Edouard Marquez

February 20, 2019
Tweet

Transcript

  1. Introduction à Flutter GDG Tours

  2. Introduction à Flutter GDG Tours Qui suis-je ? Edouard Marquez

    Freelance développeur Android et Flutter @g123k edouard@marquez.cool Cofondateur du Flutter Paris @FlutterDev
  3. Introduction à Flutter GDG Tours Les applications multiplateforme

  4. Introduction à Flutter GDG Tours Les applications multiplateforme Mauvaises performances

    Mauvaise intégration au système
  5. Introduction à Flutter GDG Tours … mais ça c'était avant

    Flutter !
  6. Introduction à Flutter GDG Tours En résumé, qu'est-ce que Flutter

    ? OpenSource Toutes les couches Multiplateforme Android (4.1+) & iOS (8.0+) Inspiré du web Hot Reload, concepts… Code natif = performances Dart Langage de programmation
  7. Introduction à Flutter GDG Tours Quelques exemples d'applications itsallwidgets.com

  8. Introduction à Flutter GDG Tours Quelques exemples d'applications Google Ads

    The History of Everything Hamilton
  9. Les bases Le langage Dart L'architecture de Flutter Le gestionnaire

    de dépendances
  10. Introduction à Flutter GDG Tours Le paradigme : application native

    Widgets OEM Position GPS Bluetooth Audio Capteurs Caméra Etc Plateforme Services Code natif Application Canvas Evénements
  11. Introduction à Flutter GDG Tours Le paradigme : WebView (Ionic,

    Cordova…) Javascript WebView Application Plateforme Position GPS Bluetooth Audio Capteurs Caméra Etc Services Bridge Canvas Evénements
  12. Introduction à Flutter GDG Tours Le paradigme : type React

    Native Javascript Widgets OEM Application Plateforme Position GPS Bluetooth Audio Capteurs Caméra Etc Services Bridge Canvas Evénements
  13. Introduction à Flutter GDG Tours Le paradigme : Flutter Code

    natif Canvas Evénements Application Plateforme Position GPS Bluetooth Audio Capteurs Caméra Etc Services Widgets, Rendu Platform Channels
  14. Introduction à Flutter GDG Tours La stack Flutter Material Cupertino

    Widgets Rendering Fondation Animation Painting Gestures Framework (Dart) Skia Dart Text Engine (C++)
  15. Le langage Dart

  16. Introduction à Flutter GDG Tours Le language Dart Par Google

    + regain d'intérêt Multiplateforme Cli, web et Flutter Future/Stream async/await Deux modes AOT et JIT Typage fort Depuis Dart 2.0 Syntaxe familière Apprentissage court
  17. None
  18. Le gestionnaire de dépendances

  19. Introduction à Flutter GDG Tours Pub : le gestionnaire de

    packages en Dart pub.dartlang.org Liste des packages Package Code Dart uniquement Plugin Code Dart et Android/iOS
  20. Introduction à Flutter GDG Tours De nombreux plugins déjà disponibles

    Authentification Database & Cloud Firestore Storage Analytics Messaging AdMob Base de données SQLite (SQFLite) Préférences (~ NSUserDefaults) Données Flux Redux RXDart Flutter Stream Friends Autres Google Facebook Twitter Comptes Firebase
  21. Les Widgets Stateless / Statefull La liste Mais comment ça

    marche ?
  22. Tout est un widget “ “ Composition over inheritance “

  23. Combien y-a-t-il de widgets affichés sur cet écran ? Quizz

    1 5 1
  24. Introduction à Flutter GDG Tours Liste des widgets flutter.io Widgets

    catalog
  25. Introduction à Flutter GDG Tours Application Flutter Gallery Flutter Gallery

    Google Play uniquement
  26. Introduction à Flutter GDG Tours Liste des widgets Material AppBar,

    RaisedButton, 
 SnackBar, Chip, Card… Cupertino CupertinoNavigationBar, CupertinoButton, Cupertino…. Widgets génériques Text, Image, Padding, Theme… Texte
  27. Introduction à Flutter GDG Tours Liste des layouts / containers

    Fils unique Text, Image, Padding, Theme… Padding Texte Fils multiples Column (les uns en dessous des autres) Row (les uns à côté des autres) Stack (les uns aux dessus des autres) Column Texte
  28. None
  29. Stateless / Statefull

  30. Introduction à Flutter GDG Tours Quelle différence entre StatelessWidget et

    StatefulWidget ? StatelessWidget Son état n'évolue pas au fil du temps Bienvenue ! StatefulWidget Widget attaché à un état (State) qui peut évoluer au fil du temps Vous avez 1 item Ajouter un item au panier
  31. StatelessWidget

  32. StatefulWidget

  33. StatefulWidget -> State

  34. Le fonctionnement

  35. Introduction à Flutter GDG Tours L'arbre de Widgets Arbre "basique"

    Ne contient que des attributs simples permettant d'expliquer comment construire l'interface Arbre immutable A chaque changement d'état, on doit reconstruire l'arbre
  36. Introduction à Flutter GDG Tours Non pas un, mais trois

    arbres Arbre des éléments Arbre mutable qui fait le lien entre un Widget et son RenderObject Arbre de widgets Arbre qui décrit les composants et leurs valeurs Arbre de rendu Arbre mutable de RenderObjects qui s'occupent de gérer le layout, le dessin et la gestion du touch
  37. None
  38. Introduction à Flutter GDG Tours Non pas un, mais trois

    arbres Arbre des widgets Arbre des éléments Arbre de rendu MyApp Text
 text : Hello World Container color : Color.black Element Element Element MyAppRender TextRender
 text : Hello World ContainerRender color : Color.black
  39. None
  40. Introduction à Flutter GDG Tours Non pas un, mais trois

    arbres Arbre des widgets Arbre des éléments Arbre de rendu MyApp Text
 text : Hello World Container color : Colors.blue Element Element Element MyAppRender TextRender
 text : Hello World ContainerRender color : Colors.blue ContainerRender color : Color.black
  41. Les outils pour les développeurs Les IDEs supportés Le Hot

    Reload Les outils tiers
  42. Démo

  43. Les IDEs supportés

  44. Introduction à Flutter GDG Tours Deux IDEs supportés IntelliJ IDE

    qui bénéficie du support officiel Visual Studio Code Plugin géré par Google, mais en décalé par rapport à IntelliJ
  45. Les outils tiers

  46. Introduction à Flutter GDG Tours Flare : le Lottie de

    Flutter
  47. Introduction à Flutter GDG Tours Les CI Bitrise.io Support officiel

    de Flutter depuis fin janvier CodeMagic CI entièrement dédié à Flutter et gratuit (pour le moment)
  48. Les plateformes Les platform views La communication Dart <-> plateforme

    Les plateformes supportées
  49. Introduction à Flutter GDG Tours La communication entre code Dart

    et les plateformes MethodChannel : transmettre une information
  50. Code Flutter

  51. Code Android (Java)

  52. Code iOS (Objective C)

  53. Introduction à Flutter GDG Tours La communication entre code Dart

    et les plateformes EventChannel : transmettre un flux d'informations
  54. Les platform views

  55. Flutter dessine tout ce qui est à l'écran “ “

    *
  56. Introduction à Flutter GDG Tours Flutter doit parfois faire des

    compromis Google Maps ou WebView demandent beaucoup de travail pour les recréer Widgets indispensables Coucou les SDKs de pub Widgets qui n'existeront jamais La solution : Les Platform Views
  57. None
  58. Les plateformes supportées

  59. Introduction à Flutter GDG Tours Côté mobile : Android et

    iOS
  60. Introduction à Flutter GDG Tours Et plus généralement, tout ce

    qui fait tourner des apps Android Android Things Wear OS ChromeOS + possibilité d'avoir IntelliJ
  61. Introduction à Flutter GDG Tours Sur les ordinateurs Desktop Embedding

    for Flutter google/flutter-desktop-embedding Go Flutter desktop embedder Drakirus/go-flutter-desktop-embedder
  62. Introduction à Flutter GDG Tours Jusqu'à faire un équivalent de

    Powerpoint / Keynote
  63. Introduction à Flutter GDG Tours Et même pour le web

    ! Material Cupertino Widgets Rendering Fondation Animation Painting Gestures Framework (Dart) Flutter Web Engine dart:ui Projet uniquement annoncé et le choix de la solution est en cours 
 (HTML+CSS+Canvas ou CSS Paint API) Projet HummingBird
  64. Démo

  65. Et maintenant ? La roadmap 2019 Par où commencer

  66. La roadmap 2019

  67. Introduction à Flutter GDG Tours Roadmap 2019 : cycle de

    sortie des versions Master Dev Bêta Stable Tous les mois, en début de mois 4 par an (= tous les semestres)
  68. Les nouveautés Roadmap 2019 (soumise à modifications) Dynamic patching (Android

    seulement) Gestion des extensions Communication avec le code en C/C++ Permettre de tester Flutter sans tout l'environnement Meilleure intégration des service Google
  69. Par où commencer

  70. Introduction à Flutter GDG Tours Tout est expliqué sur le

    site officiel flutter.io "Get started"
  71. Introduction à Flutter GDG Tours Liens utiles Slack francophone slack.flutter-france.fr

    Newsletter flutterweekly.net Awesome Flutter Solido/awesome-flutter YouTube Flutter Paris youtube.flutter.paris Codelabs officiels codelabs.google.com Cours sur Udacity bit.ly/study-jam-udacity
  72. Merci ! Questions ? @g123k @FlutterDev