Flutter

Qu'est-ce que Flutter ?

Flutter est le kit d'interface open source de Google pour créer des applications mobiles, web et de bureau à partir d'un seul code source écrit en langage Dart. Au lieu d'encapsuler les contrôles natifs du système, Flutter dessine sa propre interface avec son propre moteur de rendu, et tout ce que vous voyez est construit à partir de widgets. Un même projet peut cibler Android, iOS, Windows, macOS, Linux et le web.

Comment fonctionne Flutter

Dart et compilation

Pendant le développement, les applications Flutter tournent dans une machine virtuelle, ce qui donne un rechargement à chaud avec conservation de l'état : vous modifiez le code et voyez le résultat sans tout recompiler. Pour les versions de production, Flutter compile Dart directement en code machine (Intel x64 ou ARM). Sur le web, Dart est compilé en JavaScript ou en WebAssembly. La liste actuelle des plateformes et des versions de système prises en charge se trouve sur la page des plateformes prises en charge de Flutter et change d'une version à l'autre.

Widgets

Un widget est une description immuable d'une partie de l'interface utilisateur. Vous assemblez de petits widgets en arbre : un bouton se trouve dans une colonne, elle-même dans un scaffold, lui-même dans l'application. Quand l'état change, Flutter reconstruit les widgets concernés : l'écran est donc une fonction de votre état. Flutter possède sa propre implémentation de chaque contrôle d'interface au lieu d'utiliser ceux du système.

Rendu avec Impeller

Le moteur Flutter, écrit en grande partie en C++, rastérise chaque image. Impeller est son moteur de rendu et compile les shaders lors de la construction du moteur, si bien qu'ils ne sont pas compilés pendant l'exécution de l'application. D'après la documentation de Flutter pour la version 3.47, Impeller est le seul moteur de rendu pris en charge sur iOS, il est activé par défaut sur Android à partir de l'API 29 (les appareils plus anciens reviennent à OpenGL) et il est activé par défaut sur macOS, Linux et Windows. Flutter sur le web utilise toujours Skia.

Exemple

Une équipe de livraison de repas crée une application. La liste des restaurants est une ListView de widgets carte alimentée par un endpoint REST. Un appui sur une carte ouvre l'écran de détail. Le même code Dart est publié sur l'App Store, Google Play et dans une version web, et les parties propres à chaque plateforme, comme les notifications push, passent par des plugins.

Erreurs fréquentes

• Tester uniquement sur un émulateur rapide ou un téléphone haut de gamme. Les saccades apparaissent sur du matériel plus ancien : testez sur un appareil modeste.
• Reconstruire de grands sous-arbres de widgets à chaque changement d'état. Gardez l'état près des widgets qui l'utilisent.
• Appeler le backend depuis de nombreux écrans sans cache ni pagination, de sorte que chaque navigation déclenche des requêtes lentes. Voir la pagination d'API.
• Prendre « un seul code source » pour « aucun travail par plateforme ». Les permissions, les règles des stores, les notifications push et le comportement web diffèrent toujours selon la plateforme.

Flutter, tests de charge et surveillance

La fluidité de Flutter à l'écran relève du client et se vérifie avec les outils de profilage de Flutter sur de vrais appareils. Ce que l'application attend, c'est le plus souvent le backend. Chaque écran qui charge des données appelle un endpoint d'API, et une latence élevée à cet endroit se ressent comme une application lente. LoadFocus ne profile pas l'interface Flutter, mais peut tester les services qui la soutiennent. Utilisez les tests de charge pour voir comment ces endpoints se comportent quand beaucoup d'utilisateurs ouvrent l'application en même temps, et la surveillance d'API pour les vérifier en continu et être alerté quand l'un tombe ou ralentit. Deux lectures pratiques : mesurer les temps de chargement d'une application mobile avec des tests de charge dans le cloud et optimiser les performances des API mobiles. Si vous comparez des outils, voyez React Native et Expo.

Questions fréquentes (FAQ)

Quel langage utilise Flutter ?

Flutter utilise Dart. Dart est orienté objet, et les applications Flutter sont compilées en code machine natif pour les versions de production, ou en JavaScript ou WebAssembly pour le web.

Quelles plateformes Flutter prend-il en charge ?

Android, iOS, Windows, macOS, Linux et le web. Les versions de système et les navigateurs pris en charge changent à chaque version : consultez la page des plateformes prises en charge dans la documentation de Flutter.

Flutter, est-ce la même chose que React Native ?

Non. Les deux créent des applications multiplateformes, mais Flutter dessine sa propre interface avec son propre moteur et utilise Dart, alors que React Native utilise JavaScript et affiche via des composants d'interface natifs.

Comment tester le backend d'une application Flutter ?

Le backend est une API HTTP ordinaire : vous pouvez tester la charge et surveiller ses endpoints avec les mêmes outils que pour n'importe quel autre client. Vérifiez le temps de réponse et le taux d'erreurs, pas seulement que l'application démarre.