Introduction et codelab Flutter

A presentation at GDG Nantes in May 2019 in Nantes, France by Horacio Gonzalez

Slide 1

Slide 1

Introduction et codelab Flutter GDG Nantes

Slide 2

Slide 2

Introduction à Flutter GDG Nantes Qui sommes-nous ? Horacio Gonzalez Spaniard lost in Brittany, developer, dreamer and all-around geek Flutter

Slide 3

Slide 3

Introduction à Flutter GDG Nantes Qui sommes-nous ? Pierre Tibulle Developer, Jobcrafter, Maker and sketchnoter !

Slide 4

Slide 4

Introduction à Flutter GDG Nantes Qui sommes-nous ? Edouard Marquez Freelance développeur Android et Flutter @g123k @FlutterFrance edouard@marquez.cool Cofondateur du Flutter Paris

Slide 5

Slide 5

Avant de commencer… https://flutter.dev/docs/get-started/install https://flutter.dev/docs/get-started/editor https://flutter.dev/docs/get-started/test-drive

Slide 6

Slide 6

Introduction à Flutter En résumé, qu’est-ce que Flutter ? OpenSource Toutes les couches Multiplateforme Android (4.1+) & iOS (8.0+) Code natif = performances Dart Langage de programmation Inspiré du web Hot Reload, concepts… GDG Nantes

Slide 7

Slide 7

Les bases L’architecture de Flutter Le langage Dart Les widgets

Slide 8

Slide 8

Introduction à Flutter GDG Nantes Le paradigme : application native Application Plateforme Canvas Widgets OEM Evénements Code natif Position GPS Caméra Services Audio Bluetooth Capteurs Etc

Slide 9

Slide 9

Introduction à Flutter GDG Nantes Le paradigme : WebView (Ionic, Cordova…) Application Plateforme Canvas WebView Evénements Javascript Audio Caméra Bluetooth Services Bridge Position GPS Capteurs Etc

Slide 10

Slide 10

Introduction à Flutter GDG Nantes Le paradigme : type React Native Application Plateforme Canvas Widgets OEM Javascript Bridge Evénements Position GPS Caméra Services Audio Bluetooth Capteurs Etc

Slide 11

Slide 11

Introduction à Flutter GDG Nantes Le paradigme : Flutter Application Plateforme Canvas Widgets, Rendu Evénements Code natif Position GPS Audio Caméra Services Platform Channels Bluetooth Capteurs Etc

Slide 12

Slide 12

Introduction à Flutter GDG Nantes La stack Flutter Material Cupertino Widgets Framework (Dart) Rendering Animation Painting Gestures Foundation Engine (C++) Skia Dart Text

Slide 13

Slide 13

Le langage Dart

Slide 14

Slide 14

Introduction à Flutter GDG Nantes Le language Dart Par Google Multiplateforme

  • regain d’intérêt Cli, web et Flutter Future/Stream Deux modes async/await AOT et JIT Typage fort Syntaxe familière Depuis Dart 2.0 Apprentissage court

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

Les widgets

Slide 18

Slide 18

Composition over inheritance “ “ Tout est un widget “ “

Slide 19

Slide 19

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

Slide 20

Slide 20

Introduction à Flutter Comprendre les widgets : le Flutter Inspector à la rescousse GDG Nantes

Slide 21

Slide 21

Introduction à Flutter GDG Nantes Liste des widgets flutter.dev Widgets catalog

Slide 22

Slide 22

Introduction à Flutter GDG Nantes Application Flutter Gallery Flutter Gallery Google Play uniquement

Slide 23

Slide 23

Introduction à Flutter GDG Nantes Liste des widgets Texte Widgets génériques Material Cupertino Text, Image, Padding, Theme… AppBar, RaisedButton, SnackBar, Chip, Card… CupertinoNavigationBar, CupertinoButton, Cupertino….

Slide 24

Slide 24

Introduction à Flutter GDG Nantes Liste des layouts / containers Column Padding Texte Texte Fils unique Fils multiples Text, Image, Padding, Theme… Column (les uns en dessous des autres) Row (les uns à côté des autres) Stack (les uns aux dessus des autres)

Slide 25

Slide 25

Slide 26

Slide 26

Avant Dart 2.3

Slide 27

Slide 27

Depuis Dart 2.3

Slide 28

Slide 28

Stateless / Statefull

Slide 29

Slide 29

Introduction à Flutter GDG Nantes Quelle différence entre StatelessWidget et StatefulWidget ? Bienvenue ! Vous avez 1 item Ajouter un item au panier StatelessWidget StatefulWidget Son état n’évolue pas au fil du temps Widget attaché à un état (State) qui peut évoluer au fil du temps

Slide 30

Slide 30

StatelessWidget

Slide 31

Slide 31

StatefulWidget

Slide 32

Slide 32

StatefulWidget -> State

Slide 33

Slide 33

Les platform views

Slide 34

Slide 34

Flutter dessine tout ce qui est à l’écran * “ “

Slide 35

Slide 35

Introduction à Flutter GDG Nantes Flutter doit parfois faire des compromis Widgets indispensables Google Maps ou WebView demandent beaucoup de travail pour les recréer Widgets qui n’existeront jamais Coucou les SDKs de pub La solution : Les Platform Views

Slide 36

Slide 36

Slide 37

Slide 37

Les plateformes supportées

Slide 38

Slide 38

Introduction à Flutter Côté mobile : Android et iOS GDG Nantes

Slide 39

Slide 39

Introduction à Flutter GDG Nantes Et plus généralement, tout ce qui fait tourner des apps Android Android Things Wear OS ChromeOS + possibilité d’avoir IntelliJ

Slide 40

Slide 40

Introduction à Flutter GDG Nantes Sur les ordinateurs Desktop Embedding for Flutter google/flutter-desktop-embedding Go Flutter desktop embedder Drakirus/go-flutter-desktop-embedder

Slide 41

Slide 41

Introduction à Flutter GDG Nantes Et même pour le web ! Material Cupertino Widgets Framework (Dart) Rendering Animation Fondation Projet HummingBird Technical Preview : ça marche… mais c’est tout Painting dart:ui Flutter Web Engine Gestures

Slide 42

Slide 42

Quelques conseils

Slide 43

Slide 43

Introduction à Flutter GDG Nantes Un plugin pour IntelliJ Idea (Rainbow Brackets), Visual Studio Code (Bracket Pair Colorizer)

Slide 44

Slide 44

Introduction à Flutter GDG Nantes Raccourcis (live templates) Stful : Créer un StatefulWidget Stless : Créer un StatelessWidget

Slide 45

Slide 45

Introduction à Flutter GDG Nantes Pubspec Assist (VS Code uniquement) : trouver facilement des dépendances

Slide 46

Slide 46

Introduction à Flutter Flutter Pub Version Checker (IntelliJ uniquement) GDG Nantes

Slide 47

Slide 47

3.. 2.. 1 !

Slide 48

Slide 48

Introduction à Flutter GDG Nantes C’est à vous ! ptibulle.github.io Codelab

Slide 49

Slide 49

Introduction à Flutter GDG Nantes Liens utiles Slack francophone YouTube Flutter Paris slack.flutter-france.fr youtube.flutter.paris Cours sur Udacity Codelabs officiels bit.ly/study-jam-udacity codelabs.google.com Awesome Flutter Newsletter Solido/awesome-flutter flutterweekly.net

Slide 50

Slide 50

Les plateformes La communication Dart <-> plateforme Intégrer Flutter à une app existante Les platform views Les plateformes supportées

Slide 51

Slide 51

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

Slide 52

Slide 52

Code Flutter

Slide 53

Slide 53

Code Android (Java)

Slide 54

Slide 54

Code iOS (Objective C)

Slide 55

Slide 55

Introduction à Flutter GDG Nantes La communication entre code Dart et les plateformes EventChannel : transmettre un flux d’informations

Slide 56

Slide 56

Mélanger natif/Flutter

Slide 57

Slide 57

Introduction à Flutter GDG Nantes Possibilité d’intégrer Flutter à une application existante Mélanger natif/Flutter Points d’entrée Flutter S’intégrer à une app existante On peut lancer une zone du code