De retour de la Flutter Connection 2024 : ce qu’il fallait retenir pour les projets d’applications hybrides

Une partie de la team Flutter de USERADGENTS était le 24 avril dernier à la conférence Flutter Connection 2024 organisée par “La Tech Connection”, un collectif de développeurs français qui organise aussi des journées centrées sur d’autres technos comme la Swift Connection, la React Native Connection, etc. Au programme entre autres de la douzaine de présentations de la journée : les chantiers en cours (ou pas) chez Flutter, un zoom sur le fonctionnement des « gestures » et de FlutterFlow, des outils pour la mise à jour, des widgets modifiables à distance et une bonne dose de retours d’expérience de développeurs Flutter de tous horizons. Petit florilège de ce qui nous a paru le plus intéressant.  

FlutterFlow passe la seconde ! 

Leigha Reid, Head of Product de FlutterFlow a animé une conférence dédiée à l’outil pour présenter en détail son fonctionnement et ses opportunités à la communauté. FlutterFlow permet de créer rapidement et facilement des applications mobiles avec Flutter en se basant sur des composants existants, un système de drag & drop et la possibilité de paramétrer un certain nombre d’interactions pour ne pas avoir besoin de coder quoi que ce soit manuellement. Leigha Reid a illustré la manière dont l'interface visuelle se matérialise concrètement en code fonctionnel à travers une démo avancée sur la génération de code et a également fait état de plusieurs bonnes pratiques pour assurer la cohérence visuelle et la maintenabilité du code. Parmi elles : la nécessité d’adopter un design system robuste, l’utilisation de composants réutilisables à importer directement depuis Figma… 

FlutterFlow, qui se positionne désormais plus comme un éditeur visuel de code plutôt qu’un éditeur no code, ambitionne de séduire une audience plus large et notamment les développeurs experts qui pourront créer facilement des interfaces utilisateurs complètes dans l’outil, de façon indépendante du code fonctionnel, avant d’intégrer les éléments dans leur code existant. FlutterFlow apporte donc une aide précieuse pour exécuter rapidement certaines tâches ou composants standards mais présente quelques limites pour des applications complexes ou des interfaces très customisées. Chez USERADGENTS, notre team Flutter s’est saisie du sujet depuis quelques temps déjà et réfléchit à une façon pertinente de mobiliser FlutterFlow dans nos process projets pour en tirer un maximum de bénéfices.

Jeshanth Jeyachelvan, Développeur Flutter

Flutter’s Gestures Mechanics : pour la beauté du geste

Nos développeurs ont été particulièrement marqués par l’une des conférences de la journée qui revenait sur le fonctionnement des écrans tactiles, sur les interactions gestuelles associées (double tap, long tap…) et qui mettait en lumière le rôle crucial de GestureArena dans ce contexte. 

GestureArena est une classe utilisée pour gérer les gestes dans Flutter. Elle permet de spécifier des règles de priorité pour une zone où plusieurs gestes peuvent être détectés et traités en simultané, par exemple pour un widget qui implique à la fois un zoom et un glissement. La fonctionnalité est particulièrement utile dans les applications avec des interfaces complexes qui comportent des éléments interactifs comme les jeux.

La présentation s’est aussi axée sur l’impact des apps sociales comme TikTok sur l’UX des applications à travers le cas du scroll vertical, devenu depuis quelques années une véritable norme comportementale. Ces réflexions démontrent l’importance pour les développeurs d’anticiper les évolutions des comportements utilisateurs en matière de gestes pour optimiser les expériences mobiles. Il est en effet fondamental de se remettre constamment en question sur les pratiques établies pour continuer à innover et surtout à engager.

En comparaison avec le développement natif, on peut dire que Flutter offre plus de flexibilité dans la gestion des gestes et un contrôle plus fin de leur reconnaissance et leur traitement. Dans certains cas, les expériences deviennent presque plus fluides et intuitives. Grâce à son moteur de rendu intégré, Flutter permet d’avoir un contrôle direct sur le rendu des widgets et la gestion des événements, ce qui permet de personnaliser avec précision les interactions gestuelles. Pour supprimer par exemple un élément d'une liste via un geste de balayage, il est possible d’ajuster la sensibilité, la durée, la distance de déplacement, la vitesse du geste, etc.

Jeshanth Jeyachelvan, Développeur Flutter 

Et si on trouvait des moyens de faciliter le déploiement de nos apps pendant les phases de maintenance et d’évolution ?

Pour nos développeurs, c’est un sujet ! Assouplir les processus de déploiement de nos applications fait partie des préoccupations quotidiennes de nos équipes. C’est pourquoi deux conférences ont particulièrement retenu notre attention pendant la Flutter Connection. 

D’abord, la conférence “Server-Driven UI” qui expliquait comment utiliser des interfaces générées via serveur distant pour rendre les applications plus flexibles et faciles à mettre à jour, sans passer à chaque fois par les stores. Sur le plan technique, le Server-Driven UI se base sur une librairie Flutter déjà existante, les Remote Flutter Widgets (RFW), qui génèrent des widgets à partir des données distantes envoyées depuis un serveur à l’app et permettent donc d’afficher du contenu personnalisé à l’utilisateur de manière instantanée. Attention toutefois, cette méthode nécessite d’avoir une connexion stable et doit tenir compte des politiques des app stores qui parfois peuvent tout simplement bannir les apps effectuant leurs mises à jour en dehors des soumissions officielles.

La personnalisation d’interface est un questionnement courant chez nos clients. Elle demande une approche back-end impliquant d’apprendre un nouveau formatage de données à devoir gérer par des développeurs non mobiles et également, pour pallier les déconnexions réseau, de la gestion de cache. Cela peut donc être coûteux pour le projet. En tout cas, si le Server-Driven UI reste expérimental et que nous ne le conseillons pour l’instant pas pour un usage de mise en production, nous estimons que la souplesse du SDK Flutter et la volonté des développeurs à vouloir tester les normes d’usages sont vraiment intéressantes à noter. Cela montre que Flutter peut devenir une solution réellement disruptive dans certains cas.

Julien Pipard, Lead Développeur iOS & Flutter

Plus tard, nous avons aussi pu découvrir ShoreBird, un service payant qui permet aux développeurs de déployer rapidement des mises à jour (correctifs de bugs, améliorations de performance, nouvelles fonctionnalités) sur des applications Flutter déjà en production, contournant ainsi le processus de soumission traditionnel aux stores d'applications. 

ShoreBird s'intègre à une application Flutter en ajoutant un moteur Flutter modifié qui gère les mises à jour en direct du code Dart. Lors de la configuration du projet avec ShoreBird, c’est ce moteur qui va permettre à l'application de vérifier automatiquement les mises à jour. Cette intégration se fait lors de l'initialisation de ShoreBird dans le projet Flutter, où les fichiers et configurations nécessaires sont ajoutés. Une fois déployée sur les appareils des utilisateurs via les stores en utilisant le client ShoreBird, l'application peut recevoir des mises à jour automatiques via Shorebird, sans besoin d'installation ou de mise à jour manuelle.

Attention, ShoreBird repose sur un fork¹ de Flutter, ce qui peut entraîner des retards dans l'intégration des dernières mises à jour de Flutter lui-même. De plus, contourner le chemin classique de vérification et de soumission d’une app peut présenter un risque en termes de conformité et de qualité, pouvant aller là encore jusqu'au ban par les stores.

Jeshanth Jeyachelvan, Développeur Flutter 

Vers l’uniformisation des HomeScreen Widgets iOS & Android en Flutter

C’est du moins ce qui nous a été proposé lors de la conférence “Bring your Flutter App to the HomeScreen Widgets” qui mettait en avant l’importance croissante de ces derniers, en particulier depuis l'arrivée des widgets interactifs dans iOS 17. Les HomeScreen Widgets offrent un accès rapide à des informations essentielles en exploitant judicieusement l'espace d'écran, ce qui pourrait augmenter l’engagement quotidien des utilisateurs lorsqu’ils sont bien faits.

Une démo sur l’app de base Flutter “Counter” (où l’utilisateur appuyait sur un bouton qui incrémente un texte affichant le nombre total de taps) a notamment permis de montrer comment, malgré les limitations de bridging entre le code Dart et les codes natifs, il est possible de faciliter la création de Widgets HomeScreen en utilisant le package home_widget. L’idée est de prouver qu’il est bien possible d’avoir des widgets interactifs qui s’actualisent sur Android et iOS en étant pilotés par du code Dart. 

Cependant, bien que cette bibliothèque soit efficace pour l'envoi et la mise à jour des données, il n'est pas encore possible de créer visuellement des widgets natifs pour l'écran d'accueil en utilisant Flutter. En effet, les spécificités de ces interfaces natives ne permettent pas encore au framework Flutter d'y être intégré pleinement.

Sans nul doute, cette bibliothèque fera partie de nos outils car elle permet d'uniformiser la fonctionnalité dans un seul langage, Dart, et c'est exactement ce que nous recherchons pour la création d'applications hybrides ! Même si l'interface utilisateur n'est pas encore prise en charge, cela représente déjà un gain de temps de développement et une cohérence fonctionnelle entre les applications iOS et Android.

Julien Pipard, Lead Développeur iOS & Flutter

Bonus : les nouvelles librairies Flutter à garder en mémoire

• rfw (Remote Flutter Widget) : Permet de contrôler l'interface utilisateur d'une application Flutter en injectant directement les widgets depuis un serveur. Le serveur envoie les données via un fichier RFW, que le SDK interprète côté application. Cette librairie est particulièrement utile pour les interfaces adaptatives et la personnalisation du contenu. Toutefois, la modification dynamique du contenu peut poser un risque d'interdiction sur certains stores.
• home_widget : Facilite la gestion des widgets pour les écrans d'accueil sur Android et iOS. Elle ne gère que la synchronisation des données, les mises à jour et les interactions, laissant la partie UI aux composants natifs.
• reflectable : Offre la possibilité d'utiliser des macros personnalisées dans le code en utilisant des annotations.
• device_preview : Permet de prévisualiser l'application sur des émulateurs pour voir son rendu sur différents appareils.
• patrol : Conçue pour faciliter les tests UI des applications Flutter.
• envied : Facilite la lecture sécurisée des variables d'environnement.
• leancode_forms : Un package permettant de créer et gérer des formulaires basés sur le modèle BLoC.

Globalement, cette journée a été pour nos experts plutôt riche en enseignements ! Un bon moyen de se plonger dans les dernières tendances de développement de l’univers Flutter et de découvrir de nouvelles méthodes de travail / outils pour optimiser l’architecture et la gestion de nos projets mobiles basés sur le framework. Un regret : seule une brève présentation a été consacrée à la portabilité d'une application mobile Flutter vers une application web, montrant les ajustements possibles au niveau du code. Nous sommes restés un peu sur notre faim mais cela nous a toutefois donné envie d’explorer davantage Flutter web en interne. Nous avons décidé de mettre à l'épreuve les capacités et les limites de cette technologie par nous-mêmes afin de mieux comprendre ses possibilités. Notre objectif est de développer une expertise approfondie qui nous permettra de conseiller nos clients de manière fiable et pertinente sur l'utilisation de Flutter web dans leurs projets futurs.

Mais alors maintenant, c’est quoi la suite pour Flutter dans les prochains mois ? Quelles sont les évolutions prévues ? Bien que ce sujet n'ait pas été explicitement abordé pendant la journée car, rappelons-le, elle n’a pas été organisée par Google directement, nos développeurs ont pu obtenir quelques bribes de réponses lors de la conférence de Loïc Sharma nommée grâce à un concept qu’on avait quasiment oublié depuis 2022 : "Into the Flutter-Verse." Loïc Sharma, Software Engineer dans l'équipe Flutter Desktop chez Google, est principalement revenu sur les chantiers en cours, comme l'utilisation des fenêtres multiples, et sur tous les sujets de veille actuels qui ne sont en fait jamais réellement rendus publics. Il s’avère en effet que Flutter a une manière bien particulière d’annoncer les nouveautés : aucune date de sortie n'est jamais fixée, pour quoi que ce soit ! Les sujets de veille ne sont pas cachés mais ils ne sont pas non plus annoncés officiellement. Avant qu'une nouvelle fonctionnalité ne soit vraiment intégrée dans le SDK, elle est souvent accessible dans un package indépendant ou dans une branche expérimentale du code Flutter (comme le Static Metaprogramming) et c’est uniquement lorsqu'elle devient stable et qu’elle obtient de bons retours de la part de la communauté qu’elle est intégrée dans les versions publiques de Flutter. Cela nous rappelle que Flutter est bien un produit communautaire. 

Besoin d’éclairages et d’accompagnement dans vos projets Flutter ? Contactez-nous. 

¹ - Un fork est une sorte de copie de l’outil initial à laquelle on a ajouté des configurations et fonctionnalités supplémentaires.