Introduction à Flutter

Transcript

1. Introduction à Flutter
   GDG Tours
   

   View Slide

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
   

   View Slide

3. Introduction à Flutter GDG Tours
   Les applications multiplateforme
   

   View Slide

4. Introduction à Flutter GDG Tours
   Les applications multiplateforme
   Mauvaises performances
   Mauvaise intégration au système
   

   View Slide

5. Introduction à Flutter GDG Tours
   … mais ça c'était avant Flutter !
   

   View Slide

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
   

   View Slide

7. Introduction à Flutter GDG Tours
   Quelques exemples d'applications
   itsallwidgets.com
   

   View Slide

8. Introduction à Flutter GDG Tours
   Quelques exemples
   
   d'applications
   Google Ads The History of Everything Hamilton
   

   View Slide

9. Les bases
   Le langage Dart
   L'architecture
   
   de Flutter
   Le gestionnaire de
   dépendances
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

14. Introduction à Flutter GDG Tours
    La stack Flutter
    Material Cupertino
    Widgets
    Rendering
    Fondation
    Animation Painting Gestures
    Framework
    
    (Dart)
    Skia Dart Text
    Engine
    
    (C++)
    

    View Slide

15. Le langage Dart
    

    View Slide

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
    

    View Slide

17. View Slide

18. Le gestionnaire de
    dépendances
    

    View Slide

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
    

    View Slide

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
    

    View Slide

21. Les Widgets
    Stateless / Statefull
    La liste
    Mais comment ça
    marche ?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. Introduction à Flutter GDG Tours
    Application Flutter Gallery
    Flutter Gallery
    
    Google Play uniquement
    

    View Slide

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
    

    View Slide

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
    

    View Slide

28. View Slide

29. Stateless / Statefull
    

    View Slide

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
    

    View Slide

31. StatelessWidget
    

    View Slide

32. StatefulWidget
    

    View Slide

33. StatefulWidget -> State
    

    View Slide

34. Le fonctionnement
    

    View Slide

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
    

    View Slide

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
    

    View Slide

37. View Slide

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
    

    View Slide

39. View Slide

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
    

    View Slide

41. Les outils pour les
    développeurs
    Les IDEs supportés
    Le Hot Reload
    Les outils tiers
    

    View Slide

42. Démo
    

    View Slide

43. Les IDEs supportés
    

    View Slide

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
    

    View Slide

45. Les outils tiers
    

    View Slide

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

    View Slide

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)
    

    View Slide

48. Les plateformes
    Les platform views
    La communication
    
    Dart <-> plateforme
    Les plateformes
    supportées
    

    View Slide

49. Introduction à Flutter GDG Tours
    La communication entre code Dart et les plateformes
    MethodChannel : transmettre une information
    

    View Slide

50. Code Flutter
    

    View Slide

51. Code Android (Java)
    

    View Slide

52. Code iOS (Objective C)
    

    View Slide

53. Introduction à Flutter GDG Tours
    La communication entre code Dart et les plateformes
    EventChannel : transmettre un flux d'informations
    

    View Slide

54. Les platform views
    

    View Slide

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

    View Slide

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
    

    View Slide

57. View Slide

58. Les plateformes
    supportées
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

62. Introduction à Flutter GDG Tours
    Jusqu'à faire un équivalent de Powerpoint / Keynote
    

    View Slide

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
    

    View Slide

64. Démo
    

    View Slide

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

    View Slide

66. La roadmap 2019
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

69. Par où commencer
    

    View Slide

70. Introduction à Flutter GDG Tours
    Tout est expliqué sur le site officiel
    flutter.io
    
    "Get started"
    

    View Slide

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
    

    View Slide

72. Merci !
    
    
    Questions ?
    @g123k @FlutterDev
    

    View Slide