Flutter

Introduction et codelab
Flutter
GDG Nantes
Introduction à Flutter GDG Nantes
Qui sommes-nous ?
Horacio Gonzalez
Spaniard lost in Brittany, developer,

dreamer and all-around geek
Flutter
Qui sommes-nous ?
Pierre Tibulle
Developer, Jobcrafter, Maker and

sketchnoter !
Qui sommes-nous ?
Edouard Marquez
Freelance développeur
Android et Flutter
@g123k
@FlutterFrance
[email protected]
Cofondateur du Flutter Paris
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 
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…

Les bases
L'architecture
de Flutter
Le langage Dart
Les widgets
Le paradigme : application native
Application Plateforme
Canvas
Widgets OEM
Evénements
Code natif
Position GPS Bluetooth
Services
Audio Capteurs
Caméra Etc
Le paradigme : WebView (Ionic, Cordova…)
Canvas
WebView
Evénements
Javascript
Services
Bridge
Audio Capteurs
Caméra Etc
Le paradigme : type React Native
Canvas
Widgets OEM
Evénements
Bridge
Javascript
Services
Audio Capteurs
Caméra Etc
Le paradigme : Flutter
Canvas
Widgets,
Rendu
Evénements
Code natif
Services
Platform
Audio Capteurs
Channels
Caméra Etc
La stack Flutter
Material Cupertino
Widgets
Framework
Rendering
(Dart)
Animation Painting Gestures
Foundation
Engine
Skia Dart Text

(C++)
Le langage Dart
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

Les widgets
“ Tout est un widget
“
“ Composition over inheritance

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

Comprendre les widgets : le Flutter Inspector à la rescousse

Liste des widgets
flutter.dev
Widgets catalog
Application Flutter Gallery
Flutter Gallery
Google Play uniquement

Liste des widgets
Texte
Widgets génériques
Material
Cupertino
Text, Image,
AppBar, RaisedButton,   CupertinoNavigationBar,
Padding, Theme… SnackBar, Chip, Card… CupertinoButton, Cupertino….
Liste des layouts / containers
Column
Padding
Texte
Texte
Fils unique
Fils multiples
Text, Image,
Column (les uns en dessous des autres)
Padding, Theme… Row (les uns à côté des autres)
Stack (les uns aux dessus des autres)

Avant Dart 2.3
Depuis Dart
2.3
Stateless / Statefull
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
StatelessWidget
StatefulWidget
StatefulWidget -> State
Les platform views
“ Flutter dessine tout
ce qui est à l'écran
*
“
Flutter doit parfois faire des compromis
Widgets indispensables Widgets qui

La solution :
Google Maps ou WebView

n'existeront jamais
demandent beaucoup
Les Platform Views
de travail pour les recréer Coucou les SDKs de pub
Les plateformes
supportées
Côté mobile : Android et iOS

Et plus généralement, tout ce qui fait tourner des apps Android
ChromeOS
Android Things Wear OS
+ possibilité d'avoir IntelliJ
Sur les ordinateurs
Desktop Embedding
for Flutter
google/flutter-desktop-embedding
Go Flutter desktop
embedder
Drakirus/go-flutter-desktop-embedder
Et même pour le web !
Material Cupertino
Widgets
Framework
Rendering
(Dart)
Animation Painting Gestures
Fondation
Projet HummingBird
Technical Preview : ça marche…
mais c'est tout

dart:ui Flutter Web Engine
Quelques conseils
Un plugin pour IntelliJ Idea (Rainbow Brackets), Visual Studio Code (Bracket Pair Colorizer)
Raccourcis (live templates)
Stful : Créer un StatefulWidget Stless : Créer un StatelessWidget

Pubspec Assist (VS Code uniquement) : trouver facilement des dépendances

Flutter Pub Version Checker (IntelliJ uniquement)

3.. 2.. 1 !
C'est à vous !
ptibulle.github.io
Codelab
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
Les plateformes
La communication
Dart <-> plateforme
Intégrer Flutter à une

app existante
Les platform views
Les plateformes
supportées
La communication entre code Dart et les plateformes
MethodChannel : transmettre une information

Code Flutter
Code Android (Java)
Code iOS (Objective C)
La communication entre code Dart et les plateformes
EventChannel : transmettre un flux d'informations

Mélanger natif/Flutter
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

Flutter

Transféré par

Droits d'auteur :

Formats disponibles

Flutter

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Flutter

Transféré par

Droits d'auteur :

Formats disponibles

Introduction et codelab

Spaniard lost in Brittany, developer,

Developer, Jobcrafter, Maker and

En résumé, qu'est-ce que Flutter ?

Toutes les couches

Android (4.1+) & iOS (8.0+)

Hot Reload, concepts…

Le paradigme : application native

Le paradigme : WebView (Ionic, Cordova…)

Le paradigme : type React Native

Skia Dart Text

+ regain d'intérêt Cli, web et Flutter

async/await AOT et JIT

Depuis Dart 2.0 Apprentissage court

“ Composition over inheritance

affichés sur cet écran ?

Comprendre les widgets : le Flutter Inspector à la rescousse

Liste des widgets

Application Flutter Gallery

Google Play uniquement

Liste des widgets

Liste des layouts / containers

Padding, Theme… Row (les uns à côté des autres)

Stack (les uns aux dessus des autres)

Quelle différence entre StatelessWidget et StatefulWidget ?

Bienvenue ! Vous avez

Flutter doit parfois faire des compromis

Widgets indispensables Widgets qui

Google Maps ou WebView

Côté mobile : Android et iOS

Et plus généralement, tout ce qui fait tourner des apps Android

Sur les ordinateurs

Et même pour le web !

Technical Preview : ça marche…

mais c'est tout

Raccourcis (live templates)

Stful : Créer un StatefulWidget Stless : Créer un StatelessWidget

Pubspec Assist (VS Code uniquement) : trouver facilement des dépendances

Flutter Pub Version Checker (IntelliJ uniquement)

Cours sur Udacity

Dart <-> plateforme

Intégrer Flutter à une

Les platform views

La communication entre code Dart et les plateformes

MethodChannel : transmettre une information

La communication entre code Dart et les plateformes

EventChannel : transmettre un flux d'informations

Possibilité d'intégrer Flutter à une application existante

S'intégrer à une app existante On peut lancer une zone du code

Vous aimerez peut-être aussi