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 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

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 Caméra Services Audio Bluetooth Capteurs Etc

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

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

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

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

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

Composition over inheritance “ “ Tout est un widget “ “

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

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

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, Padding, Theme… AppBar, RaisedButton, SnackBar, Chip, Card… CupertinoNavigationBar, CupertinoButton, Cupertino….

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)

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 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

Les plateformes supportées

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

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

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 (Dart) Rendering Animation Fondation Projet HummingBird Technical Preview : ça marche… mais c’est tout Painting dart:ui Flutter Web Engine Gestures

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 Flutter Pub Version Checker (IntelliJ uniquement) GDG Nantes

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