Flutter est un SDK open-source développé par Google pour le développement d'applications mobiles multiplateformes performantes pour iOS et Android. Il offre une architecture réactive basée sur des widgets, un accès aux API natives, et permet une personnalisation aisée des interfaces via Material Design et Cupertino. Dart, le langage de programmation utilisé, propose des fonctionnalités modernes telles que la programmation asynchrone et une riche bibliothèque de ressources.

1. Flutter SDK
Développement mobile multiplateforme
Erick Ghaumez,
Consultant Front-end / Formateur
http:/rxla.bz

2. flutter.io
• SDK open-source développé par Google
• Objectif : faciliter et accélérer le développement de
belles applications mobiles performantes ( iOS et
Android, et peut être plus … )

3. Points forts
• Outillage / Developper Experience
• Orienté UI
• Architecture « reactive » basée sur widgets
• Implémentation soignée de Material Design
• Moteur Graphique « maison »
• Dart
• Accès aux APIs natives
• Performances…

4. Architecture

5. Outils
• Flutter CLI
$ git clone https://github.com/flutter/flutter.git
$ export PATH=`pwd`/flutter/bin:$PATH
• flutter doctor, flutter create, flutter run, …
• IntelliJ plugin ( ou VS Code )
•Hot reload
• Dart Observatory

6. Orienté UI
• Une application Flutter est un arbre de widgets
« réactifs » ( composants )
• Le fonctionnement des widgets est inspiré de React
• Stateless / Stateful
• Stateful : setState(( )=>… ) … provoque un build( )

7. Layout facile
• Tout est widget :
• Row, Column, Stack
• Container, Padding, Center,
• Text, RaisedButton, FlatButton, IconButton, RichText
• ListView, GridView, Table
• …

8. Material design
• Catalogue : https://flutter.io/widgets/
…
+ Cupertino widgets : https://flutter.io/widgets/cupertino/

9. Custom UIs
• L’utilisation de Material design est facultatif, Flutter
permet de créer facilement ses propres ( styles de )
composants
• Inkwell, GestureDetector
• CustomPainter

10. Dart
• Un langage solide, moderne et familier
https://www.dartlang.org/guides/language/language-tour
https://dartpad.dartlang.org
• OO, typage statique ( Flutter / Dart 2.0 ), enum, Generics, mixins…
• Asynchronie : Future, async / await
• Streams ( ± RxJS Observables )
• …
• Des cores librairies très riches ( io, async, collection… )
• Un outillage efficace : pub, analyzer, observatory, stagehand, dartfmt…

11. Dart : sucres syntaxiques
• Cascades
• get / set
• Fonctions
• paramètres nommés
• One liner
• typedef
• Constructeurs nommés, constructeurs « Factory »
• …

12. Architecture

13. API natives et plugins
• Un système de canaux
permet à Flutter/Dart de
facilement communiquer avec
la plateforme native
• https://rxlabz.github.io/dart/
flutter/2017/06/15/sytody-
flutter-natif-plugins.html

14. Liens
• https://play.google.com/store/apps/details?id=io.flutter.gallery
• https://flutter.io/setup/
• Exemples : https://github.com/flutter/flutter/tree/master/
examples
• Awesome Flutter : https://github.com/Solido/awesome-
flutter/blob/master/README.md
• https://docs.flutter.io
• Package & plugins : https://pub.dartlang.org/flutter