Vous êtes sur la page 1sur 57

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
Introduction à Flutter GDG Nantes

Qui sommes-nous ?

Pierre Tibulle

Developer, Jobcrafter, Maker and


sketchnoter !
Introduction à Flutter GDG Nantes

Qui sommes-nous ?

Edouard Marquez

Freelance développeur

Android et Flutter

@g123k

@FlutterFrance

edouard@marquez.cool
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

Introduction à Flutter GDG Nantes

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
Introduction à Flutter GDG Nantes

Le paradigme : application native

Application Plateforme

Canvas
Widgets OEM
Evénements

Code natif
Position GPS Bluetooth

Services
Audio Capteurs

Caméra Etc
Introduction à Flutter GDG Nantes

Le paradigme : WebView (Ionic, Cordova…)

Application Plateforme

Canvas
WebView
Evénements

Javascript
Position GPS Bluetooth

Services
Bridge

Audio Capteurs

Caméra Etc
Introduction à Flutter GDG Nantes

Le paradigme : type React Native

Application Plateforme

Canvas
Widgets OEM
Evénements

Bridge
Javascript
Position GPS Bluetooth

Services
Audio Capteurs

Caméra Etc
Introduction à Flutter GDG Nantes

Le paradigme : Flutter

Application Plateforme

Canvas
Widgets,

Rendu
Evénements

Code natif
Position GPS Bluetooth

Services
Platform

Audio Capteurs
Channels

Caméra Etc
Introduction à Flutter GDG Nantes

La stack Flutter

Material Cupertino

Widgets
Framework

Rendering
(Dart)
Animation Painting Gestures

Foundation

Engine

Skia Dart Text


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


Les widgets
“ Tout est un widget

“ Composition over inheritance



Quizz

151
Combien y-a-t-il de widgets

affichés sur cet écran ?


Introduction à Flutter GDG Nantes

Comprendre les widgets : le Flutter Inspector à la rescousse


Introduction à Flutter GDG Nantes

Liste des widgets

flutter.dev

Widgets catalog
Introduction à Flutter GDG Nantes

Application Flutter Gallery

Flutter Gallery

Google Play uniquement


Introduction à Flutter GDG Nantes

Liste des widgets

Texte

Widgets génériques
Material
Cupertino

Text, Image,
AppBar, RaisedButton, 
 CupertinoNavigationBar,
Padding, Theme… SnackBar, Chip, Card… CupertinoButton, Cupertino….
Introduction à Flutter GDG Nantes

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
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
StatelessWidget
StatefulWidget
StatefulWidget -> State
Les platform views
“ Flutter dessine tout
ce qui est à l'écran
*

Introduction à Flutter GDG Nantes

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
Introduction à Flutter GDG Nantes

Côté mobile : Android et iOS


Introduction à Flutter GDG Nantes

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

ChromeOS
Android Things Wear OS
+ possibilité d'avoir IntelliJ
Introduction à Flutter GDG Nantes

Sur les ordinateurs

Desktop Embedding
for Flutter

google/flutter-desktop-embedding

Go Flutter desktop
embedder

Drakirus/go-flutter-desktop-embedder
Introduction à Flutter GDG Nantes

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
Introduction à Flutter GDG Nantes

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

Raccourcis (live templates)

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


Introduction à Flutter GDG Nantes

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


Introduction à Flutter GDG Nantes

Flutter Pub Version Checker (IntelliJ uniquement)


3.. 2.. 1 !
Introduction à Flutter GDG Nantes

C'est à vous !

ptibulle.github.io

Codelab
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
Les plateformes

La communication

Dart <-> plateforme

Intégrer Flutter à une


app existante

Les platform views

Les plateformes
supportées
Introduction à Flutter GDG Nantes

La communication entre code Dart et les plateformes

MethodChannel : transmettre une information


Code Flutter
Code Android (Java)
Code iOS (Objective C)
Introduction à Flutter GDG Nantes

La communication entre code Dart et les plateformes

EventChannel : transmettre un flux d'informations


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

Vous aimerez peut-être aussi