Blog

Flutter est un framework open source et multiplateforme développé par Google dont la première version est sortie en 2018. Il est actuellement le framework multiplateforme le plus utilisé du moment selon Statista, JetBrain et la survey Stack Overflow de 2021. Il est utilisé majoritairement pour développer des applications mobiles Android et iOS, mais supporte également le web et Windows en version stable ainsi que macOS et Linux en version beta pour le moment. Il cumule à la date d’aujourd’hui 136k d’étoiles sur Github. Il est également employé par de nombreuses entreprises de par le monde.

Mais pourquoi une adoption aussi rapide de ce framework qui reste tout de même encore relativement jeune sur le marché de l’informatique en plus son langage, le Dart, qui ne s’est popularisé qu’avec ce framework ?

La petite histoire de Flutter

Flutter et Dart

Flutter fut, pour la première fois présenté au grand public lors de la Dart Developer Summit de 2015 sous le nom de code “Sky”. Son développement s’est par la suite accéléré pour atteindre sa première version stable en décembre 2018.

L’évolution de Flutter a également avancé en parallèle avec l’évolution du langage Dart.

Dart est un langage de programmation développé par Google (toujours) qui a vu le jour en 2015 avec pour objectif principal de devenir le successeur du JavaScript. But initial duquel il conserve aujourd’hui une forte interopérabilité avec le JavaScript. Ainsi, du code Dart peut très facilement être changé en JavaScript grâce à des routines existantes et s’utiliser très facilement sur du Web. De ce fait, il est un langage très polyvalent.

Il est même possible de remplacer le JavaScript d’une page par du Dart pour gérer la logique et les animations d’une page HTML. Plus d’infos ici.

Pourquoi Dart pour Flutter ?

Dart s’est imposé comme langage de choix pour le développement de Flutter en raison de sa syntaxe simple et familière à ceux venant de langages comme le C++, le Java, le JavaScript, le Python ou même le C#. Ce qui fait de ce langage, un outil relativement rapide à prendre en main pour la plupart des développeurs.

À cela, s’ajoute le fait qu’il dispose d’un système de compilation particulier qui lui permet de mettre à jour un programme Dart sans avoir besoin de le recompiler pour observer les résultats de modifications qui ont été faites (c’est ce qu’on appelle le hot reload ) et de permette un renforcement de performance pour les applications en production.

Cela permet aussi à Flutter de facilement avoir de bonnes bases pour s’intégrer à du web, du desktop ou du mobile avec des temps de développement réduits.

Flutter sous le capot

Flutter fonctionne d’une façon assez particulière. Il dispose pour son rendu d’un moteur, appelé Skia, écrit en C++, qui lui fait office de base ou de tableau vide sur lequel le famework va maintenant dessiner pixel par pixel le rendu souhaité. Et c’est de cette façon qu’il évolue sur la plupart des plateformes sur lesquelles il est utilisé, enveloppé par des contenants logiciels natifs au système sur lequel il est. Ce qui lui permet, de façon assez fluide, d’atteindre des performances assez natives, c’est-à-dire qui se rapproche des performances qu’auraient eu Java ou Kotlin sur Android ou Objective-C ou Swift sur iOS.

Le framework, qui utilise le Dart, en lui même propose assez d’abstractions pour permettre de créer et de combiner des composants pour avoir un rendu natif, fluide et supportant jusqu’à 120 fps .

Skia est la librairie graphique qui a été utilisée pour le développement d’Android et de Chrome OS également.

Comprendre le jargon du framework

Flutter vous permet donc de pouvoir utiliser un seul framework et un seul langage pour faire des applications pouvant tourner sur plusieurs plateformes toujours avec la même base de code et aucune autre configuration particulière requise en général.

Les Widgets

Avec Flutter, nous considérons chaque élément visuel comme étant un Widget. Un Widget, est donc un élément qui s’affiche à l’écran que cela soit, une page, un bouton, du texte, une animation, une disposition ou même l’application elle-même qui est considéré comme un widget.

La construction d’une interface Flutter se résume donc à agencer des widgets les uns dans les autres de sorte à pouvoir obtenir le résultat désiré.

Construire l’interface ci dessus avec Flutter se résumerait donc à mettre en place une colonne dans laquelle on disposera en grille des rectangles de couleurs oranges/jaunes qui auront des bords arrondis. Et dans le dernier rectangle nous aurons à mettre une icône d’engrenage.

Eh oui… C’est comme ça qu’on verait cette interface et on utiliserait les widgets Column (qui disposent en colonne), Container (qui permet de créer des formes dont des rectangles) et GridView (qui permet de disposer en grille).

Vous pouvez explorer plus en détails le fonctionnement et la logique des Widgets Flutter dans ce codelab de Google.

Le Hot Reload

Le hot reload est la faculté que les applications Flutter ont à pouvoir se passer d’une compilation à chaque fois qu’on a besoin d’intégrer ou de tester les modifications du code source. Cette fonctionnalité était déjà présente sur le web avec des techniques utilisant la technologie Webpack qui permet de voir en temps réel les évolutions de son site / application web juste en enregistrant le code. Flutter intègre cela pour toutes ses plateformes cibles de sorte à vous permettre de ne lancer votre code qu’une seule fois et de suivre en temps réel l’évolution de ce dernier. Ce qui vous fait gagner énormément de temps surtout sur les plateformes mobiles Android et iOS.

Les Packages

Un des points forts de Flutter réside dans la présence d’une communauté forte et active, proposant chaque jour de nouveaux outils pour régler des problèmes courants et permettre de réduire, pour le plus grand nombre, le temps de développement.

Flutter dispose ici d’un très grand nombre de packages qui sont utilisés comme dépendance pour rajouter des fonctionnalités normalement longues à implémenter comme la géolocalisation, tester la connexion, faire des requêtes vers des serveurs, valider un e-mail, etc…

Ces packages sont maintenus par l’équipe Flutter elle-même et par la communauté 💙.

Un peu plus loin dans le Dart

Le Dart ne se limite pas uniquement à Flutter. Il s’agit d’un langage puissant et pouvant être utilisé dans beaucoup d’autres domaines. Et même en dehors de Flutter.

En effet, l’écosystème Dart dispose aussi de librairies et de frameworks pour le développement backend, le développement de jeux vidéo multiplateforme ainsi qu’une bonne compatibilité avec Google Cloud Platform.

Dans cette vidéo tu trouveras un excellent talk sur le développement full stack en Dart.