Flutter est un SDK développé par Google avec l'objectif de faciliter et d'accélérer le développement de belles applications mobiles iOS et Android

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