En ce moment, quand on parle de développement d'applications mobiles beaucoup de gens n'ont que le mot Flutter à la bouche. A force d'en entendre autant de bien, j'ai donc décidé d'investiguer sur ce nouveau framework.

Dans ce premier article, je vais donc commencer par décrire en quelques mots ce qu'est Flutter puis nous allons découvrir quelques concepts de base.

Mais qu'est ce que Flutter ?

Flutter est un framework opensource de développement d'applications mobiles natives créé par Google en 2017. Il permet d'écrire des applications Android et iOS en un seul code partagé, à la manière de Xamarin.Forms. Flutter utilise des SDK d'Android et d'iOS afin d'avoir un rendu natif, que ce soit en utilisant le Material Design ou Cupertino. Il est ainsi possible d'avoir un rendu d'application utilisant le material design sur iOS, ainsi qu'une application cupertino sur Android. Comme pour tout développement d'application iOS, une machine macOS est nécessaire pour compiler l'application iOS.

Côté programmation

Le langage Dart

Flutter utilise le langage de programmation Dart, également inventé par Google. C'est un langage facile à prendre en main lorsqu'on connait C#, Java, ... . Concernant les éditeurs, on peut utiliser Android Studio en installant les plugins Flutter et Dart. Mais mon chouchou reste cependant Visual Studio Code qui supporte également Flutter après installation du plugin (qui installe également le plugin Dart).

Contrairement à React Native, les applications Flutter, grace à Dart, sont compilées AOT (Ahead of Time). Ceci permet de générer une application native pour Android et pour iOS. Ainsi le code est optimisé pour l’architecture de chaque plateforme. Une autre différence avec Xamarin et React Native est que Flutter dessine l'interface en utilisant Skia, au lieu d'être un wrapper au dessus des composants UI natifs à Android et iOS.

Un des principaux avantages de dessiner l'interface avec Skia est que l'interface utilisateur sera identique sur Android et sur iOS. Les applications Flutter se veulent pixel perfect, ainsi le design de l'application n'est pas dépendant ce l'OS.
Mais c'est aussi un inconvénient car le rendu des widgets ne seront pas natifs à l'OS, ce ne sont pas les composants natifs. 

La programmation réactive

Tout d'abord, qu'est ce que la programmation réactive ?

La programmation réactive est basée sur des concepts comme des variations des valeurs dans le temps, des flots d’événements pour modéliser les mises à jour discrètes, des suivis de dépendances, et des propagations automatiques du changement

À tout instant T de l'exécution du programme, toutes les expressions du programme doivent rester correctes. Par conséquent, les valeurs des variables évoluent dans le temps au fur et à mesure de l'exécution du programme de manière automatique et discrète

En Flutter, la programmation est donc réactive, c'est à dire que l'interface réagit aux inputs de l'utilisateur en changeant des propriétés et/ou variables. Au changement des ces propriétés, l'interface est redessinée en fonction du nouvel état. C'est donc une modification des propriétés qui déclenche une modification de l'UI et non les fonctions qui la modifient.

Les widgets

En Flutter, l'interface se construit à l'aide de widgets. Chaque widget permet de décrire ce à quoi leur vue doit ressembler en fonction de leur configuration et de leur état. Lorsque l'état d'un widget change, le framework calcule la différence avec l'état précédent afin de déterminer les modifications minimales nécessaires dans l'arbre de rendu pour passer de l'un à l'autre. Le catalogue des widgets Flutter se trouve ici.

Chaque widget est une sous-classe de StatelessWidget ou de StatefulWidget et doit implémenter la fonction build qui a pour but de décrire l'interface utilisateur du widget.

Stateless

Les widget dit stateless sont des widgets qui ne gèrent pas d'états. Prenons par exemple le TextWidget, il ne possède pas d'état. En allant voir son code source on voit qu'il étend la classe StatelessWidget. Il est instancié via son constructeur qui construit ensuite le widget qui va être affiché à l'écran en fonction de ses propriétés, via la fonction build. Dans notre cas du TextWidget, il suffit donc de passer en paramètre son texte et son style par exemple pour le créer.

Un widget stateless n'est donc pas dynamique. Il ne dépend de rien en dehors de propriétés qui lui sont passées dans son constructeur. Ainsi, si une propriété du widget change, l'interface du widget ne sera pas redessinée.

Stateful

Les widget dit stateful, eux, sont dynamiques. C'est à dire, ils changent en fonction des inputs, du résultat d'une requête asynchrone, … Par exemple, le widget Image, en regardant son code source on peut voir qu'il étend cette fois la classe StatefulWidget. Tout comme notre exemple précédent, le widget Image s'instencie en passant des paramètres à son constructeur. Mais cette fois, il a la méthode createState() (ici). Cette méthode permet de créer l'état de notre widget.

Toujours avec notre exemple de Image, nous avons donc une classe _ImageState, étendant State<Image>, qui définit l'état du widget Image. Dans notre cas d'un widget stateful, c'est cette classe qui implémente la méthode  build construisant l'interface. Les modifications dynamiques de l'interface se font au travers des modifications des propriétés (en manipulant des Stream) ou bien au travers de méthodes appelant la méthode setState(). Par exemple :

setState(() {
	_imageIngo = imageInfo;
});

L'appel à cette méthode déclenche un nouvel appel à la méthode build du widget avec le nouvel état.

Un widget stateful est donc dynamique, il écoute les modifications et met à jour l'interface en fonction de ces changements.

Le hot reload

Dernier point, mais pas des moindres. Flutter inclut la fonctionnalité de hot reloading qui permet de rapidement tester des interfaces utilisateurs, des fonctionnalités, corriger des bugs lors du débogage. Le hot reloading fonctionne en injectant le code source modifié dans la machine virtuelle Dart en cours d'exécution (téléphone, émulateur ou simulateur). Un fois le nouveau code injecté, le framework reconstruit l'arborescence de widget.

Comment ça fonctionne ?

Pour utiliser le hot reloading, il suffit de lancer l'application en mode debug sur votre device (physique ou virtuel), modifier un fichier puis d'enregistrer les modifications (ou de cliquer sur le bouton de reload dans la barre), and TADA ! la page est à jour avec les modifications.

Conclusion

Flutter semble être un framework très prometteur. Le langage Dart ainsi que le système de widgets sont facile à prendre en main. Pour ma part, j'ai créé une simple petite application afin de faire mes premiers tests. Le développement se fait rapidement et assez simplement. Dans un prochain article nous allons voir comment installer Flutter et créer une première application afin de pouvoir commencer à jouer avec le code.

UPDATE : L'article sur l'installation de Flutter sous Windows est disponible, c'est par ici !