FlutterFlow, une nouvelle manière de travailler pour les développeurs ?

Depuis sa création par Google en 2018, le framework Flutter s’est rapidement affirmé comme une solution phare pour le développement cross-plateforme. Il permet de créer des applications natives iOS, Android ou desktop à partir d’une base de code unique. Il faut dire que depuis quelques années, le développement cross-plateforme a commencé à bousculer le marché des technologies mobiles, notamment grâce à sa promesse de réduction des coûts de développement et de maintenance, redistribuant un peu les cartes entre les solutions existantes. Cependant, pour de nombreuses entreprises, adopter Flutter nécessite une expertise technique bien spécifique et surtout nouvelle, ce qui peut représenter un frein et expliquer pourquoi certains font le choix d’utiliser des plateformes low-code ou no-code pour développer leurs services. De façon globale, ces plateformes, qui permettent de créer des applications sans avoir besoin d’écrire une seule ligne de code, ont pour objectif de rendre les technologies de développement accessibles à un public large, tout en conservant leurs avantages. 

FlutterFlow fait partie de cette catégorie d’outils. C’est un moyen d’exploiter la puissance de Flutter pour concevoir et développer en ligne des applications complètes via une interface unique, sans exiger de compétences approfondies en programmation sur le langage Dart. Mais ces engagements sont-ils vraiment concrets ? Peut-il servir nos métiers du développement et révolutionner notre manière de travailler ? Certaines tâches peuvent-elles lui être déléguées ? Nous avons demandé à nos experts tech de faire le test et de nous donner leur avis. 

“Notre expertise, bien que centrée sur le développement sur-mesure d’applications, est en perpétuelle évolution face aux avancées technologiques qui transforment notre métier. En tant qu’experts, nous ne pouvons pas ignorer l’essor des approches no-code/low-code comme FlutterFlow. C’est pourquoi nos spécialistes Flutter se sont saisis du sujet afin de mieux en comprendre les enjeux et d’apporter un éclairage stratégique sur l’orientation que nous pourrions adopter.”

Le mot du CTO, Mathieu Pisonero

Au sommaire :

• Une petite présentation rapide de FlutterFlow
• Notre test de l’outil sur 3 pages : une page liste produits, une fiche produit, un panier 
• L’avis détaillé des experts USERADGENTS

Petite présentation rapide de FlutterFlow

La barre latérale gauche

Intégrant totalement cette fameuse logique "no-code", FlutterFlow propose une interface graphique en apparence simple et accessible puisque tout ce qui est faisable habituellement en code est disponible depuis la barre latérale gauche. Cette dernière regroupe tout le nécessaire pour construire une application. On y retrouve une vaste bibliothèque de widgets et de composants prêts à l'emploi comme des boutons, des listes, des champs de texte, des images ou encore des animations. Ces éléments permettent de concevoir des écrans interactifs et dynamiques en effectuant de simples drags and drops dans la zone centrale qui simule en temps réel le rendu et le fonctionnement de l’application en cours de création. La barre latérale gauche offre également un accès direct au storyboard qui permet de visualiser la structure globale de l’application et de naviguer facilement entre les écrans. C’est là aussi que se situent les outils pour la gestion des dépendances, la configuration des bases de données (Firestore, Supabase, SQLite…), l'intégration des systèmes de paiement (Stripe…), les thèmes, les assets, les API et là où se fait la configuration des intégrations avancées, comme GitHub pour le versionnement ou Google Analytics pour suivre les performances. Enfin, il est aussi possible d’accéder à des fonctionnalités de tests automatisés, démontrant réellement le potentiel “tout-en-un” de FlutterFlow.

La barre latérale droite

La barre latérale droite de FlutterFlow, elle, est dédiée à la gestion détaillée des widgets. Leur apparence et leur style sont entièrement personnalisables (couleurs, taille, animations…) pour qu’ils s’intègrent parfaitement au design global de l’application. Gros plus selon nous : FlutterFlow exploite la haute réutilisation des widgets via une mécanique de composants, ce qui évite de devoir tout reconfigurer à chaque fois. Il est également possible de définir des comportements pour chaque widget, qu'il s’agisse de naviguer entre les écrans, de déclencher des actions spécifiques via des événements comme onTap ou encore d’interagir avec des données. FlutterFlow offre par exemple la possibilité de connecter un widget à une base de données ou à une API pour afficher des informations dynamiques en temps réel. C’est également dans cette barre latérale droite que se configurent les conditions d’affichage. On peut y lier les widgets à des données locales ou distantes et définir la logique métier directement dans l’interface, sans avoir, encore une fois, à écrire une seule ligne de code.

En résumé, la barre latérale droite, c’est une véritable tour de contrôle qui permet d’affiner et d’enrichir chaque composant en gérant aussi bien son style que son fonctionnement.

Les principaux points forts

En prenant en main FlutterFlow, nous avons particulièrement aimé :

• l’interface de conception ultra intuitive en drag and drop qui permet de facilement organiser les différents éléments d’une application et de configurer leurs propriétés grâce à des menus très simples.

• les connecteurs de services backend comme Firebase qui permettent de gérer l’authentification, la base de données en temps réel et le stockage. À noter qu’il est aussi possible d’intégrer des API REST pour connecter d’autres services ou bases de données.
• la possibilité de prévisualiser son application directement dans l’interface pour tester rapidement ses modifications sans avoir à compiler son projet.
• l’export du code source de l’application car contrairement à beaucoup d’autres solutions no-code, FlutterFlow offre l’opportunité de personnaliser ou optimiser son projet en dehors de sa plateforme.
• les outils pour ajouter facilement des animations et des transitions complexes.
• la gestion multilingue & localisée, bien pratique pour créer des applications adaptées à des audiences internationales.

“Burger Menu” : notre test de FlutterFlow

Chez USERADGENTS, chaque développeur connaît le fameux “Burger Menu”. Il s’agit en fait de notre test maison pour évaluer nos futurs talents. Cette petite application, simple en apparence, intègre des concepts qui, eux, peuvent être assez complexes à maîtriser. C’est donc un excellent moyen pour nous d’évaluer le niveau du “candidat” FlutterFlow pour découvrir ce qu’il a véritablement dans le ventre… Sa mission ? Créer une application de fast-food qui contient un menu avec une liste de burgers (Product Listing Page). Lorsque l’utilisateur clique sur un burger, il doit être redirigé vers une page de détails (Product Description Page) affichant le nom, le prix et une description du produit. Il doit pouvoir ensuite ajouter des burgers à son panier depuis la page de détails grâce à un bouton dédié. 

“Il est important d’avoir une application de référence pour ce type de test. Cette application reflète les standards des applications e-commerce et constitue une base essentielle pour tout développeur mobile. Elle est particulièrement utile pour évaluer l’intégration de nouveaux composants technologiques.”

Prigent Roudaut, Head of Mobile

À noter : pour ce test, nous avons utilisé nos propres données via une API.

La page liste burgers (PLP)

Une histoire d’API

Il faut le dire, la gestion des requêtes API dans FlutterFlow est vraiment simple. L'interface permet d’ajouter facilement l’URL de son endpoint et de configurer les méthodes HTTP en quelques clics. On peut définir des paramètres, des en-têtes et des tokens dynamiques grâce à des variables, ce qui rend la personnalisation des appels API plutôt flexible. Une autre fonctionnalité appréciable est la possibilité de tester directement ses requêtes dans l’éditeur, ce qui permet de valider instantanément leur fonctionnement et les données retournées. FlutterFlow simplifie aussi grandement la gestion des tokens via des interceptors. Ces mécanismes permettent de modifier dynamiquement les informations envoyées, comme les données d’authentification, pour éviter une gestion manuelle des appels API. Ils sont largement utilisés par nos développeurs, ce qui constitue un bon argument en faveur de FlutterFlow, en particulier pour les projets nécessitant des systèmes d’authentification robustes ou des gestionnaires d’autorisations sécurisés.

Au cours de notre test de référence, le candidat est censé se rendre compte que l’API mise à sa disposition n’est pas stable et génère de manière aléatoire des erreurs 500… Bon oui, c’est un brin sadique mais c’est pour la bonne cause. Bonne surprise ! FlutterFlow permet de mettre en place la gestion d’erreurs personnalisées, ce qui nous a permis d’identifier simplement les erreurs à la volée et d’avoir une réponse personnalisée en nous appuyant sur le cache.

Structure de la page liste, UI & data

Pour afficher les éléments renvoyés par notre requête API, nous avons pu nous appuyer sur un composant classique de Flutter : la GridView, qui regroupe les différents items (en l'occurrence les burgers composant le menu de notre petit restaurant virtuel) sous forme de grille. FlutterFlow permet de customiser son style d’affichage (nombre d’items affichés par ligne, lazy loading...) et ses comportements (navigation, animations de transition entre les pages type Hero...). Nous avons ensuite travaillé la composition de chaque item à l'intérieur de notre GridView en exploitant, là-aussi, les widgets Flutter basiques tels que TextView ou Images, et procédé aux liaisons nécessaires avec les données.

Au final, nous voilà avec une application affichant une page liste efficiente, réalisée en un temps record. Si nous mettons de côté la prise en main de FlutterFlow, créer cette page nous aura pris moins d’une heure, ce qui pour un écran simple de ce type représente quand même un vrai gain de productivité.

Les fiches burgers (PDP)

Modèles préexistants

Si nous avons construit notre PLP totalement from-scratch, nous avons exploré une autre approche pour cet écran en utilisant un modèle préexistant, autre notion forte de FlutterFlow. En effet, au lieu de partir d’un écran vide et de tout composer nous-mêmes, la plateforme nous a permis de choisir parmi un vaste choix de templates pré-construits pour des usages communs (page d’accueil, page d’authentification…). Véritable raccourci pour le développement, leur usage est particulièrement intéressant et ne limite en rien la capacité de customisation de l’écran.

Navigation

La navigation entre la PLP des burgers et leur PDP détaillée s’est faite plutôt aisément grâce aux paramètres des composants. Nous avons configuré un événement onTap pour rediriger vers la page de détails en prenant soin de faire transiter les données nécessaires (l’identifiant du burger sélectionné) en tant que paramètre. Nous en avons profité pour ajouter une animation Hero qui ajoute une transition fluide et esthétique lors de la navigation entre les pages. 

Cette fois, tout est bon. Notre menu virtuel peut être consulté sans problème, dans son intégralité.

Le panier

FlutterFlow AI

Autre écran, autre approche. Cette fois, au lieu de partir d’un modèle préexistant, nous avons décidé de tester la fonctionnalité générative de l’IA intégrée à FlutterFlow. Chez USERADGENTS, nous sommes déjà habitués à intégrer l’IA dans nos processus de travail, que ce soit pour la génération de code, l’automatisation des tests ou le contrôle qualité. En revanche, nous n’avions encore jamais exploré la génération complète d’un écran par l’intelligence artificielle.

Les possibilités offertes par FlutterFlow AI sont assez étendues. Nous avons particulièrement apprécié la fonctionnalité Sketch to Component, qui permet, en important une maquette, de générer automatiquement l’ensemble des composants, directement dans l’interface de FlutterFlow. Nous avons également expérimenté Page Creation et Component Creation, qui, grâce à un simple prompt descriptif, génèrent tout ou partie d’un écran de manière autonome.Cependant, le rendu généré n’est pas toujours parfait : de petites incohérences ou erreurs peuvent se glisser dans l’interface par rapport aux attentes initiales. Heureusement, l’éditeur de FlutterFlow permet de reprendre la main facilement pour ajuster manuellement les éléments générés par l’IA. Il est aussi possible d’avoir un aperçu en temps réel de ce que l’on est en train de prompter, ce qui permet d’itérer et d’affiner ses requêtes au fur et à mesure pour obtenir un résultat plus proche de ses attentes.

Base de données

Qui dit panier dit aussi le besoin de stocker des données ! Et ça tombe bien car FlutterFlow permet de gérer une base de données directement depuis l’interface. L’outil propose une intégration native avec Firebase, Supabase ou des bases de données locales comme SQLite, ainsi que des moyens de définir facilement la structure des données. On peut notamment ajouter des champs de différents types (texte, nombre, booléen, etc.) sans avoir à écrire de code. Côté sécurité, notons que FlutterFlow permet de configurer directement les permissions et les accès aux données pour sécuriser les collections et champs sensibles, pour Firebase ou Supabase tout du moins.

L’avis des experts USERADGENTS sur FlutterFlow

Nous venons de le voir, la prise en main de Flutterflow est plutôt simple et la construction / personnalisation des écrans avec les outils proposés, plutôt intuitive et efficace. Mais si la carrosserie est belle, qu'en est-il au niveau du moteur et du châssis, éléments essentiels pour la performance et la maintenabilité d'une application ? Nous avons passé au crible le code généré par FlutterFlow et si une bonne surprise nous attendait au départ, le code étant plutôt clair et lisible, la suite de l’analyse a malheureusement révélé plusieurs points critiques.

Des applications très lourdes

Premier gros choc : le poids de notre toute petite application, composée de seulement trois touts petits écrans dépasse les 70 Mo pour l’ensemble des packages générés. En réalité, l’explication est simple car FlutterFlow inclut dans le code tous les composants disponibles sur la plateforme, y compris ceux qui ne sont pas utilisés dans l’application, ce qui augmente de facto le poids et crée un problème majeur d’optimisation. En conséquence, le téléchargement de l’application pourrait devenir difficile pour les utilisateurs, en particulier dans les zones où la connectivité est limitée, ce qui constitue un frein à l’adoption et n’est donc pas idéal pour le business… Par ailleurs, une application lourde va consommer plus de ressources système et notamment plus d'espace disque (un problème pour les appareils anciens ou bas de gamme avec peu de stockage) et nécessiter un temps de démarrage / d’utilisation plus long. Il est en soit possible de nettoyer le code généré des composants inutiles mais cela ajoute un temps non négligeable au process par rapport à un développement from scratch. 

Pour notre test simple, ces problèmes ne se sont pas trop fait ressentir. Cependant, pour des applications plus complexes, nous avons de sérieux doutes sur la stabilité et la réactivité à long terme. Et face aux préoccupations grandissantes sur l'éco-conception, cela constitue un défaut majeur…

Une architecture en retrait

FlutterFlow implémente une architecture modulaire axée sur les fonctionnalités. Si cette approche simple et accessible est adaptée à des projets modestes, elle complique toutefois la maintenance et l’évolutivité d’une application. Chez USERADGENTS, nous privilégions les standards recommandés par Google et la communauté Flutter, en particulier la Clean Architecture. Bien qu’elle soit plus complexe à mettre en œuvre au départ, cette structure garantit une meilleure scalabilité, une maintenance simplifiée et plus de robustesse pour des projets ambitieux.

Dépendance à FlutterFlow

Nous avions en tête au début de ce test d'explorer une nouvelle manière de travailler avec FlutterFlow en l’utilisant pour lancer rapidement un projet, générer des écrans et implémenter des fonctionnalités simples pour reprendre ensuite le code "à l’ancienne" et l’optimiser pour notre application. Malheureusement, cela s’est avéré impossible ou en tous cas très compliqué. Une fois un projet lancé avec FlutterFlow, il devient quasiment impossible de s’en détacher pour faire évoluer l’application dans le temps. En effet, l’architecture spécifique, les dépendances massives et l’ensemble des modules importés automatiquement rendent le code difficilement lisible et maintenable pour un développeur. La stratégie la plus cohérente consistera donc à rester dans l’interface de FlutterFlow pour assurer les évolutions, ce qui est un véritable frein pour nos développements sur-mesure.

Des développements peu efficaces

L’exécution de l’application sur le simulateur web peut être relativement lente : jusqu’à 4 minutes selon la taille du projet. Une fois l’application lancée, FlutterFlow propose une session de 30 minutes pour tester les modifications via le hot reload mais ce dernier manque clairement de réactivité. Chaque modification peut mettre jusqu’à 30 secondes pour être appliquée. En comparaison avec les outils que nous utilisons au quotidien, comme Android Studio, l’expérience développeur est nettement moins fluide avec FlutterFlow. Cette lenteur et ce manque d’optimisation se traduisent par une perte de productivité significative qui s’est clairement fait ressentir lors de nos tests.

En conclusion

Au cours de ces tests, nous avons abordé FlutterFlow avec beaucoup d’enthousiasme pour répondre à nos interrogations de départ. Toutefois, à la question “peut-on envisager de déléguer les tâches à faible valeur ajoutée à une plateforme de ce type pour mieux nous concentrer sur les aspects stratégiques et critiques d’un projet ?”, la réponse est clairement non. Nous concevons pour nos clients des applications optimisées, hautement scalables et parfaitement évolutives et sur ces critères, FlutterFlow n’est pas adapté. L’outil ne répond ni à nos besoins ni à ceux de nos clients et il serait impensable pour nous de l’intégrer dans un projet de grande envergure. 

Attention, tout n’est pas à jeter ! FlutterFlow possède quand même des atouts indéniables. Nous avons été agréablement surpris par la rapidité de création d’une application, la fluidité de son interface, son aspect collaboratif pour les équipes design & tech et ses nombreuses fonctionnalités intégrées. Tous ces éléments font de FlutterFlow un outil réellement pertinent dans le cadre d’un projet simple, de type POC (Proof of Concept) ou MVP (Minimum Viable Product), ou nécessitant une mise en place rapide. Compte tenu de son offre tarifaire, FlutterFlow pourrait convenir à une équipe réduite en taille et en moyens, à condition qu’elle reste vigilante. En effet, "no-code" ne signifie pas "sans compétence" : pour exploiter pleinement FlutterFlow, il est crucial de posséder quand même de bonnes bases en développement afin de comprendre les limites et implications de l’outil.

De notre côté, nous continuerons à suivre avec attention l’évolution de FlutterFlow. Si ses promesses ne sont pour l’instant que partiellement tenues, l’essor des technologies et notamment de l’intelligence artificielle pourrait qui sait, à terme, nous faire changer d’avis !

Besoin d’accompagnement pour développer une application Flutter ? Contactez-nous.