Flutter est un SDK open-source développé par Google pour créer des applications natives et cross-plateformes en utilisant le langage Dart. La version 1.2 a été publiée en février 2019, apportant des améliorations de performance et des outils pour le développement. Flutter permet une interface utilisateur cohérente sur différentes plateformes grâce à sa capacité à dessiner ses propres widgets.

1. Présentation Flutter
Appshare 07 mars 2019

2. C’est quoi ?
Un SDK
Projet open-source poussé par Google.
Une solution construite en C, C++ et Dart.
Architecture proche de celle de React.
Langage de programmation le Dart (sorti en 2011)

3. Depuis quand ?
Première version en 2015 (sous le nom de Sky)
première release 1.0 le 4 décembre 2018
version 1.2 sortie en février 2019 qui inclut le SDK Dart 2.2
Site web qui recense les librairies : https://pub.dartlang.org/flutter

4. A quoi ça sert ?
Créer une application native et cross plateforme (iOS, Android, “web”) à partir
d’un même code.

5. Qui est la cible ?
Les designers, les prototypeurs*, les développeurs … tout le monde au final.
Selon moi : pour un projet qui souhaite avoir exactement la même interface
partout
*je sais, ce mot n’existe pas

6. C’est un cousin ...
éloigné de PhoneGap et Cordova, seulement des applications hybrides.
proche de React Native et Xamarin. Dépendance forte de l’OS : utilisation d’un
langage interprété qui doit s’interfacer avec un OS, donc obligé d’avoir un pont
entre ces 2 couches (risque de perte de fps). C’est l’OS qui affiche le contenu. Sur
Android il est difficile de toujours savoir à quoi va ressembler l’application
Flutter se base sur une approche simple pour répondre à cette problématique,
avez-vous une idée ?

7. non ? un indice ...

8. … il dessine !
Flutter dessine sa propre interface (widget indépendant des OEM), donc il garantit
l’affichage au pixel prêt.
Gain en performance (fps)
Il permet d’avoir un look iOS ou Android, de faire même look iOS sur Android
(mauvaise idée, quoique …)
Rendu structurel
Pas d’utilisation de DSL* UI externes (langage dédié à l’UI)
*domain specific language

9. Les widgets
Inspiré de React -> un widget décrit à quoi la vue devrait ressembler étant donné
sa configuration et son état
Toute l’UI est composée de widgets
Quelques catalogues :
● Material
● Cupertino

10. {Les widgets}
import 'package:flutter/material.dart';
void main() {
runApp(
Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}

11. Tooling : IDE
IntelliJ
Android Studio
Visual Studio Code

12. Tooling : CLI
$ flutter doctor
$ flutter upgrade
$ flutter packages get (or upgrade)
$ flutter format
$ flutter analyse

13. Tooling : Hot reload
JIT (Just-In-Time)
Mise à jour de l’application en temps réel sans recompiler (injection du nouveau
code dans la VM Dart à l'exécution)
C’est state full, c’est à dire que le contexte est conservé (Intéressant quand on
debug un écran profond)

14. Quoi de neuf dans la version 1.2 ?
Amélioration de la stabilité, des performances et de la qualité du framework de
base
Amélioration des “widgets” existants (Material et Cupertino)
Nouvel outil web pour les développeurs (inspecteur de widgets, vue
chronologique, …)
SDK Dart 2.2 (+ 15 à 20% sur les performances)

15. au fait Fushia c’est quoi ?
Fuchsia est le nom de code du nouveau système d’exploitation open-source
développé par Google.
L’interface utilisateur porte le nom Armadillo, il sera l’interface utilisateur par
défaut de Fuchsia. Cette interface a été développée avec le SDK Flutter.

16. Un peu de code …
Installation flutter
Lancer sur iOS et Android
Flutter inspector
Sortir une IPA

17. Merci
questions ?