FlutterFlow AI

Qu’est-ce que FlutterFlow AI ?

FlutterFlow AI est l’ensemble des capacités d’intelligence artificielle intégrées à la plateforme de développement d’applications multiplateformes visuelle FlutterFlow. Il peut générer des pages et des composants Flutter à partir de prompts, convertir des captures d’écran d’interfaces ou des designs Figma en structures modifiables, et intégrer des modèles de chat, d’images, de voix et de vidéo en tant qu’agents IA dans les propres applications des utilisateurs.

FlutterFlow génère des projets Flutter destinés à iOS, Android, le Web et les postes de travail. L’IA accélère la création des interfaces et des fonctionnalités, mais l’utilisateur peut toujours ajuster les widgets, les états, les actions, les API, la base de données et le code personnalisé dans l’éditeur visuel, et exporter le code source pour poursuivre le développement dans les versions payantes.

Prompt to Page : affichage d’une page de suggestion

L’utilisateur peut décrire l’usage, la structure, le style et les éléments principaux de la page, et l’IA génère une page complète. Cela convient pour créer rapidement des écrans courants tels que la page de connexion, la page d’accueil, les détails des produits, les paramètres, le tableau de bord et les formulaires ; une fois générée, elle peut être modifiée davantage dans l’arbre des widgets et le panneau des propriétés.

Il est préférable d’indiquer clairement la plateforme cible, le mode de navigation, l’état des données, l’état vide et l’état d’erreur. Ce que génère l’IA est une implémentation initiale ; les processus commerciaux complexes nécessitent encore la configuration d’actions, de requêtes backend et de gestion d’état.

Prompt to Component génère des composants

Prompt to Component sert à générer des composants FlutterFlow réutilisables, tels que des cartes de produits, des blocs de profil d’utilisateur, des panneaux statistiques et une navigation personnalisée. Ces composants peuvent être intégrés sur plusieurs pages et reçoivent du texte, des images, des états et des rappels via des paramètres.

Il convient de prioriser la création de composants pour les structures répétitives, plutôt que de générer chaque page séparément. Les paramètres des composants, les contraintes de réponse et le traitement des valeurs nulles nécessitent une vérification manuelle afin d’éviter que les modifications ultérieures ne soient pas synchronisées.

Image to Component : Conversion d’image en composant

Les utilisateurs peuvent télécharger des captures d’écran de l’interface, des maquettes en ligne ou des esquisses de layout ; l’IA analyse la hiérarchie visuelle et génère des composants FlutterFlow similaires. Cela permet de transformer rapidement des images de référence en structures de widgets modifiables, au lieu d’obtenir uniquement une image non interactive.

Les captures d’écran ne peuvent pas représenter les données réelles, l’interaction, l’accessibilité ni les différentes tailles d’écran. Une fois générées, il faut reconstituer la navigation, les actions de clic, le contenu dynamique et le layout responsive, tout en évitant de copier des designs protégés par le droit d’auteur.

Importation Figma

FlutterFlow peut générer des pages ou des composants à partir des thèmes et des Frame de Figma ; les couleurs sont mappées sur le thème de FlutterFlow, et les ressources associées peuvent également être importées. La version Business offre un quota d’importation de Frame Figma plus complet, tandis que les limites d’importation pour les autres versions dépendent du tableau des prix.

Les fichiers de conception doivent d’abord organiser l’Auto Layout, les noms des calques, les composants et les polices. Une page Figma mal structurée entraîne la création d’un grand nombre de widgets positionnés absolument ou difficiles à maintenir.

FlutterFlow Designer

FlutterFlow Designer est une expérience de conception indépendante destinée à l’exploration d’interfaces et à la transmission des designs. Il permet de générer et de modifier des Frame en langage naturel, puis de les intégrer dans un projet FlutterFlow, sous forme de PNG ou de prompts lisibles. Il peut également se connecter à Claude, Gemini, Codex et à certains IDE.

Les maquettes visuelles dans Designer et l’application fonctionnelle ne se trouvent pas à la même étape. Même après le transfert, il reste nécessaire de configurer les données, la logique, la navigation et les tests ; on ne peut pas considérer une jolie maquette comme un produit achevé.

Visualisation du développement Flutter

La plateforme propose un arbre de widgets, un panneau d’attributs, des thèmes, des points de rupture réactifs, des animations et des flux d’actions, permettant aux utilisateurs de créer des applications sans avoir à écrire la majeure partie du code Dart à la main. Les résultats générés par l’IA sont intégrés dans le même environnement de montage, ce qui permet de les modifier en détail ultérieurement.

Le développement visuel ne signifie pas qu’il n’est pas nécessaire de comprendre la logique de l’application. Les grands projets nécessitent toujours la planification des limites d’état, du modèle de données, du réutilisement des composants, du traitement des erreurs et de la performance.

Firebase et Supabase

FlutterFlow peut se connecter à Firebase et Supabase pour configurer l’authentification des utilisateurs, les requêtes de base de données, le stockage ainsi que les fonctionnalités backend. Les pages générées par l’IA peuvent être liées à des données réelles, et permettent d’effectuer des ajouts, des modifications, des suppressions et des filtrages grâce à des flux d’actions.

Les règles de sécurité de la base de données doivent être définies du côté serveur. Le simple fait de cacher les boutons de gestion sur la page ne permet pas d’empêcher les accès non autorisés ; pour les projets en production, il est nécessaire de tester séparément les droits des utilisateurs anonymes, des utilisateurs ordinaires et des administrateurs.

Importation API et OpenAPI

Les utilisateurs peuvent configurer l’API REST pour mapper les paramètres, en-têtes de requête et champs de réponse aux variables et pages de FlutterFlow. Growth et les versions ultérieures prennent en charge l’importation via Swagger ou OpenAPI, ce qui permet une intégration rapide avec des backends existants.

La clé ne doit pas être intégrée directement dans le client. Les appels nécessitant un niveau élevé de confidentialité doivent passer par Cloud Functions ou un proxy serveur propriétaire, avec des délais d’attente, des tentatives de réessai et des messages d’erreur configurés.

AI Agent Builder

AI Agent Builder permet aux utilisateurs de créer des services d’IA configurables au sein de FlutterFlow, qu’ils peuvent ensuite appeler depuis des actions d’application. Actuellement, il prend en charge des fournisseurs tels que OpenAI, Google, Anthropic et ElevenLabs, ce qui permet de développer des fonctionnalités de chat, de génération d’images, de conversion texte en voix, de conversion voix en texte et de génération de vidéos.

Basic permet de créer 1 agent IA, tandis que les versions Growth et supérieures permettent en créer un nombre illimité. Les frais API des fournisseurs de modèles, les limitations de débit et les politiques de contenu sont généralement indépendants de l’abonnement FlutterFlow.

Interface générée dynamiquement par GenUI

GenUI Chat est la mise en œuvre par FlutterFlow du protocole A2UI. Les développeurs peuvent définir le catalogue de composants que l’IA est autorisée à afficher ainsi que les Action Blocks pouvant être appelés, permettant à l’agent de générer des interfaces interactives natives de manière structurée, plutôt que d’exécuter du code aléatoire.

Les composants et outils disponibles doivent faire l’objet d’une liste autorisée. Les Action Blocks concernant les paiements, la suppression, les messages externes ou les données sensibles doivent inclure une confirmation et une autorisation du serveur.

Agent d’encodage d’IA externe

FlutterFlow permet aux agents externes tels que Claude Code, Gemini CLI ou Codex de lire le contexte du projet, de générer des modifications, d’exécuter des tests et de renvoyer les changements vers l’éditeur visuel via des outils de liaison de projet. La version desktop offre également une entrée pour l’AI Agent afin de vérifier et de configurer la CLI nécessaire.

L’agent d’encodage peut modifier plusieurs ressources en même temps. Avant de l’exécuter, il convient de vérifier le projet et la branche cibles, de limiter l’étendue des modifications, et d’examiner les différences ainsi que les résultats des tests avant de faire un push.

CLI et MCP

La nouvelle flux de travail FlutterFlow AI permet de créer ou d’éditer des applications via un agent, avec le soutien de la CLI et du MCP au niveau du projet. La CLI permet également d’exporter le code source du projet, de sélectionner des branches et de déployer Firebase.

Les tokens API ne sont accessibles qu’aux abonnés valides.

Les jetons doivent être stockés dans des variables d’environnement ou des fichiers de identifiants protégés, et ne pas être enregistrés dans le dépôt, les messages ou les captures d’écran. Lorsque MCP dispose de la capacité d’écrire dans le projet, l’approbation manuelle et l’isolation des branches doivent être maintenues.

Code personnalisé

FlutterFlow prend en charge les fonctions personnalisées, les actions personnalisées, les widgets personnalisés, les classes personnalisées ainsi que des paquets Dart tiers, afin de réaliser des fonctionnalités que les actions visuelles ne peuvent pas couvrir. Les versions Growth et supérieures offrent également une extension pour VS Code, permettant de télécharger, d’éditer et de déployer du code personnalisé dans le cadre de la compatibilité.

Le code personnalisé augmente les risques de conflits lors des mises à jour et de la génération. Il ne faut l’ajouter qu’en étendant les limites stables, en enregistrant les versions dépendantes, et en exécutant des tests complets après la régénération dans FlutterFlow.

Code source et téléchargement d’APK

À partir de Basic, il est possible de télécharger le code source du projet Flutter ainsi que l’APK, pour le faire fonctionner dans un environnement Flutter local ou pour le déployer soi-même. L’export du code permet aux équipes d’intégrer des plugins natifs, d’utiliser un CI indépendant et de suivre un processus de publication sur les stores d’applications.

exporter du code ne signifie pas que tous les services cloud soient fournis avec le code source. Firebase, Supabase, les API tierces, les clés, les certificats de magasin et les comptes de plateforme doivent être configurés séparément.

Intégration GitHub

Growth et les versions ultérieures prennent en charge le Push vers GitHub. FlutterFlow enverra les modifications générées sur la branche nommée flutterflow ; il est recommandé de ne pas modifier directement cette branche, car la prochaine mise à jour pourrait écraser ces modifications.

Les modifications personnalisées doivent être placées dans une branche indépendante et traitées selon le processus officiel de fusion.

L’intégration GitHub n’est pas une synchronisation bidirectionnelle en temps réel sans conflit dans n’importe quelle direction. L’équipe doit convenir de stratégies pour créer des branches, développer des branches et les fusionner, afin d’éviter que les mises à jour du concepteur ne recouvrent le code local.

Branches et collaboration en temps réel

Free et Basic n’ont qu’une branche principale et sont principalement destinés à une seule personne ; Growth prend en charge 2 éditeurs et 2 branches ouvertes supplémentaires par projet ;

Business prend en charge jusqu’à 5 éditeurs et 5 branches ouvertes supplémentaires, et il est possible d’acheter davantage de collaborateurs pour les projets.

La collaboration en équipe doit diviser les branches par fonction et éviter de modifier simultanément la même page ou la même structure de données. Après fusion, il faut relancer les tests de génération, de construction et d’intégration.

Tests automatisés et Test Pilot

Growth peut configurer 1 test automatisé par projet, et Business jusqu’à 3. Test Pilot est utilisé pour aider à la création et à l’exécution des tests, couvrant les opérations des utilisateurs et les processus clés.

Un petit nombre de tests bout en bout ne peut pas remplacer les tests unitaires, les tests d’interface, les tests de permissions et les tests sur des appareils réels. L’accès, le paiement, le mode hors ligne, les notifications push et les liens profonds doivent faire l’objet d’une vérification approfondie.

Localisation en un clic

Growth et les versions supérieures offrent une localisation en un clic, permettant d’ajouter du contenu multilingue à une application. La traduction par IA accélère la rédaction initiale, mais la longueur du texte, le pluriel, les dates, les devises et les expressions culturelles doivent encore être vérifiés.

Les textes des stores d’applications, les mentions de confidentialité et les conditions légales ne doivent pas faire l’objet uniquement de traductions automatiques non corrigées.

Publication sur le Web et nom de domaine personnalisé

Free permet de publier des applications Web, tandis que Basic ajoute la possibilité de publier avec un nom de domaine personnalisé. Pour les applications mobiles, il est possible de télécharger des APK, de générer du code source, et d’utiliser un flux de travail pour le déploiement via une boutique en un clic.

L’audit des boutiques, les comptes de développeurs, les certificats de signature, la liste de confidentialité et la politique d’achats intégrés restent déterminés par Apple et Google ; une mise en place en un clic ne signifie pas une validation automatique.

Comparaison des prix et des versions

Édition gratuite

Gratuit à 0 dollar, il offre un environnement visuel, des modèles, une API et l’intégration de données ainsi que la publication sur le Web, permettant de créer jusqu’à 2 projets. Il comprend actuellement 10 crédits Lite, et la génération par IA offre 5 requêtes à vie.

La version gratuite ne permet pas de télécharger le code source complet ou l’APK, et ne dispose ni de dépôts sur GitHub ni de collaboration en équipe ; elle convient à l’apprentissage et à la validation de petits prototypes.

Prix de base

Basic coûte 39 dollars par mois et offre des projets illimités, la possibilité de télécharger le code source, des APK à télécharger, un nom de domaine personnalisé, des tests sur appareil réel et un déploiement en une étape dans la boutique d’applications. Il inclut 100 crédits Lite par mois ainsi que 50 requêtes de génération IA, et permet de créer 1 agent IA.

La page de paiement annuel indique une économie globale d’environ 25 % ; le montant final peut être affecté par les taxes et la région.

Prix de la croissance

Pour Growth, le plan mensuel principal coûte 80 dollars et le deuxième plan 55 dollars ; ils incluent les fonctionnalités de base ainsi que l’intégration GitHub, la collaboration en temps réel pour 2 personnes, 2 branches supplémentaires ouvertes par projet, la localisation en un clic, l’importation OpenAPI et des extensions pour VS Code. Chaque plan comprend 200 crédits Lite par mois, avec 200 générations par mois pour l’AI Generation.

Les projets nécessitant un développement local et une collaboration d’équipe sont généralement évalués à partir de Growth. Les coûts liés aux collaborateurs supplémentaires, aux API de modèles et aux services backend sont facturés séparément.

Prix d’affaires

Le plan mensuel Business offre 150 dollars pour la première place, 85 dollars pour les places 2 à 5 ; il prend en charge jusqu’à 5 éditeurs, 5 branches supplémentaires ouvertes, jusqu’à 3 tests automatisés par projet, l’import de Figma Frame, des préférences de mise en page personnalisées et une CLI. Chaque place inclut 400 crédits Lite par mois, ainsi que 500 générations par mois avec l’IA.

Business convient aux équipes plus complexes, mais le prix total doit toujours être calculé en fonction du nombre de places ; 150 dollars ne signifie pas un tarif pour cinq personnes.

Enterprise et programmes éducatifs

Enterprise propose des tarifs en fonction des besoins de l’organisation, destinés aux clients ayant des exigences plus élevées en matière de sécurité, d’échelle, d’achat et de support. FlutterFlow propose également des solutions destinées au secteur éducatif ; les qualifications et avantages sont indiqués sur la page de demande actuelle.

L’évaluation de l’entreprise doit porter sur le connecteur unique, l’audit, le traitement des données, la réactivité du support, les dépendances privées, les processus de construction et les quotas d’utilisation.

Différences entre génération par IA et crédits Lite

Le tableau des prix indique séparément le nombre de requêtes d’AI Generation et les crédits Lite. Les premiers sont utilisés pour des opérations telles que la génération d’interfaces AI au sein de la plateforme, tandis que les seconds servent aux workflows d’agents AI associés à FlutterFlow Lite.

Les deux plafonds ne peuvent pas être simplement considérés comme le même solde.

La consommation des différentes fonctionnalités d’IA sera ajustée ; les quotas restants réels et les règles de réinitialisation doivent être consultés sur la page d’utilisation du compte.

Frais de modèles tiers et de services cloud

OpenAI, Anthropic, Google, ElevenLabs, Firebase, Supabase ainsi que les comptes des stores d’applications peuvent être facturés séparément. Le forfait FlutterFlow comprend la plateforme de développement et une quantité correspondante d’unités, mais ne prévoit pas une utilisation illimitée de toutes les appels externes.

Les applications d’IA doivent définir des budgets, des limites de vitesse, un contrôle du contenu et des stratégies de dégradation en cas d’échec pour les appels aux modèles, afin d’éviter que les utilisateurs finaux ne subissent des frais incontrôlables.

Statut officiel GitHub et open source

L’éditeur visuel principal de FlutterFlow ainsi que ses services hébergés ne sont pas des produits open source. GitHub officiel met à disposition flutterflow-cli, flutterflow-ui, l’extension pour VS Code, la documentation, les exemples et les plugins Codex ; parmi ceux-ci, le CLI et certains outils sont licenciés sous des licences telles que BSD 3-Clause.

Le fait que des outils soient publics ne signifie pas que toute la plateforme FlutterFlow soit open source. Les utilisateurs peuvent exporter le code source Flutter de leurs projets, mais ils ne peuvent pas déployer eux-mêmes un service d’édition complet de FlutterFlow.

Guide d’utilisation de FlutterFlow AI

Terminer une tâche de base

1. Définir les tâches de codage à effectuer dans FlutterFlow AI, la portée du repository et les critères d’acceptation ;
2. Connectez ou importez le projet de test, et faites d’abord une sauvegarde de la branche actuelle ;
3. Utilisez d’abord Prompt to Page pour générer un plan de création de page, puis confirmez les fichiers à modifier ;
4. Utiliser Prompt to Component pour générer des composants et effectuer de petites modifications ;
5. Exécuter des tests, des vérifications statiques et la compilation ; ne pas accepter directement de code non vérifié.
6. Vérifier manuellement les droits, les clés, les dépendances et gérer les exceptions avant de fusionner ;

Créer des flux de travail professionnels réutilisables

1. Choisir un projet réel à faible risque comme modèle ;
2. Fixer l’ordre d’utilisation de Prompt to Page pour générer une page, Prompt to Component pour créer un composant et Image to Component pour convertir une image en composant ;
3. Enregistrer l’environnement, le modèle, les indications et les conditions d’échec ;
4. Définir une approbation manuelle pour les actions d’écriture, de déploiement et de suppression ;
5. Comparer la vitesse, le coût, le taux de réussite des tests et le volume de rétravail ;
6. Vérifiez la stabilité avant de l’étendre à l’équipe ou à l’environnement de production ;

À qui s’adresse-t-il ?

• Entrepreneurs souhaitant développer rapidement des applications iOS, Android et Web ;
• Équipes familières avec les produits et la conception mais qui ne souhaitent pas écrire Flutter à partir de zéro ;
• Des designers qui doivent convertir Figma ou des captures d’écran en interfaces éditables ;
• Développeurs d’applications ayant besoin d’intégration Firebase, Supabase et API ;
• Les équipes souhaitant intégrer des fonctionnalités de chat, d’images, de voix ou de vidéo basées sur l’IA dans leur application ;
• Développeurs professionnels ayant besoin du code source, de GitHub, de la CLI et d’un proxy de codage externe.

Avantages du produit

• Les résultats générés par l’IA peuvent être directement importés dans l’éditeur de visualisation Flutter ;
• Prend en charge plusieurs plateformes : mobile, Web et desktop ;
• Couvre les pages, les composants, les captures d’écran, Figma et l’AI Agent ;
• Il est possible d’exporter le code source standard de Flutter et de le connecter à GitHub ;
• Disposer d’API, de bases de données, de code personnalisé et de capacités de test ;
• Prend en charge les workflows d’agents IA externes tels que CLI, MCP, Codex, etc.

Restrictions et précautions

• La version gratuite limite le nombre d’éléments et ne permet pas d’exporter le code source complet.
• La collaboration d’équipe, GitHub, la CLI et l’importation avancée de Figma sont proposés à différents niveaux de tarification, tandis que les frais liés aux modèles et au backend doivent être calculés séparément.
• Une interface générée par l’IA ne signifie pas que la tâche est terminée ;
• Les droits sur les données, la gestion de l’état, les plugins natifs, les performances, la conformité avec l’application store et les tests sur des appareils réels exigent encore de l’expérience en développement ;

Questions fréquentes

FlutterFlow AI est-il gratuit ?

Il existe une version gratuite qui permet de créer 2 projets, avec 10 crédits Lite et 5 demandes de génération par IA à vie, mais le code source, les téléchargements APK et GitHub nécessitent un paiement.

FlutterFlow peut-il générer du code source Flutter ?

Oui. Basic et les versions supérieures permettent de télécharger le code source du projet, tandis que Growth et les versions supérieures prennent en charge le dépôt sur GitHub.

FlutterFlow AI peut-il générer une application complète ?

Il est possible de générer des squelettes de pages, de composants et d’applications, ainsi que de connecter des bases de données, des API et des agents IA ; la logique complexe, la sécurité et la publication en magasin nécessitent encore une configuration et des tests manuels.

Combien coûte FlutterFlow ?

Abonnement mensuel Basic : 39 dollars ; position principale Growth : 80 dollars, deuxième position : 55 dollars.

Le poste principal Business coûte 150 dollars, les 2e à 5e postes coûtent 85 dollars chacun. Un paiement annuel permet d’économiser environ 25 %.

FlutterFlow prend-il en charge Codex ?

Soutien. Des plugins pour Codex ainsi que des workflows CLI/MCP sont fournis officiellement, permettant de créer ou d’éditer des projets en langage naturel, mais une abonnement valide et un token API sont requis.

FlutterFlow est-il open source ?

La plateforme principale n’est pas open source. Le CLI officiel, les paquets d’aide UI, les extensions et les plugins font l’objet de codes sources publiés, et les utilisateurs peuvent également exporter leurs projets Flutter dans des solutions payantes.