J’ai utilisé FlutterFlow pour créer un portail complet de demandes de service où les propriétaires pouvaient réserver des services de plomberie, d’électricité et d’aménagement paysager. J’ai testé la génération par IA, connecté Firebase, navigué dans le contrôle de version et déployé en mode test.
Cette critique couvre la répartition des tarifs, les capacités réelles de l’IA, à quoi ressemble l’exportation du code et si la courbe d’apprentissage raide en vaut la peine.
Qu’est-ce que FlutterFlow ?
Flutterflow est une plateforme de développement d’applications visuelles qui vous permet de créer des applications natives iOS, Android et web sans écrire de code depuis zéro. Créée par d’anciens ingénieurs de Google, elle est basée sur le framework Flutter de Google.
Plutôt que de passer des semaines à apprendre Dart et le système de widgets de Flutter, FlutterFlow vous propose une interface glisser-déposer où vous pouvez :
- Concevoir des écrans visuellement à l’aide de composants préconçus
- Se connecter à Firebase, Supabase ou à des API personnalisées
- Générer des pages à partir de descriptions via l’IA
- Exporter un code Flutter propre et lisible à tout moment
Ce qui rend FlutterFlow unique, c’est sa transparence. Chaque modification visuelle que vous effectuez génère instantanément du code Dart que vous pouvez consulter, télécharger et même modifier en dehors de la plateforme. Vous n’êtes jamais enfermé.
À qui cela s’adresse-t-il ?
FlutterFlow convient surtout aux personnes qui ont besoin de vraies applications mobiles, pas seulement de sites web améliorés. Voici ceux qui en tirent le meilleur parti :
- Les fondateurs de startups créant des MVP sont la cible idéale. Si vous lancez un marché de services, une application de livraison ou une plateforme de réservation et que vous avez besoin de quelque chose dans les stores en quelques semaines (et non mois), FlutterFlow répond à vos attentes.
- Les agences et freelances développant pour des clients profitent des fonctionnalités professionnelles. Le système de contrôle de version permet de créer des branches de mise en scène, l’exportation de code vous permet de livrer des projets Flutter propres, et la génération par IA accélère la phase de conception initiale.
- Les développeurs souhaitant aller plus vite apprécieront la façon dont FlutterFlow gère les parties fastidieuses du développement mobile, comme les mises en page réactives, les piles de navigation et la gestion d’état, tout en vous permettant d’écrire du code Dart personnalisé lorsque nécessaire.
- Les propriétaires de petites entreprises curieux sur le plan technique peuvent utiliser FlutterFlow s’ils sont prêts à apprendre. Ce n’est pas Wix. Il faut maîtriser des concepts tels que les structures de données, les appels d’API et le design réactif.
Avantages et inconvénients de FlutterFlow
- L’IA génère des pages contextuellement précises
- Du code Flutter réel, exportable à tout moment
- Contrôle de version professionnel avec branches
- Intégrations natives Firebase et Supabase
- Possibilité de code Dart personnalisé si nécessaire
- Changement de thème en direct pendant la génération
- L’arborescence des widgets affiche la hiérarchie exacte
- Affichage instantané du code pour plus de transparence
- Gère bien les structures de données complexes
- Interface intégrée de test des appels d’API
- Sync avec dépôt GitHub disponible
- Mode test avec panneau de débogage
- Courbe d’apprentissage raide pour les débutants
- Nécessite des connaissances en Firebase/Supabase pour le back-end
- Pas de « mode facile » pour les tâches simples
Prêt à voir si FlutterFlow convient à votre projet ? Commencez par leur offre gratuite et créez un écran unique. Si vous parvenez à réaliser une page de connexion fonctionnelle en moins d’une heure, vous saurez si la courbe d’apprentissage en vaut la peine pour votre cas d’usage.
Fonctionnalités de FlutterFlow
- Constructeur d’applications mobiles visuel basé sur des widgets
- Génération de pages par IA à partir de descriptions textuelles
- Intégrations back-end Firebase et Supabase
- Export de code Flutter en temps réel
- Contrôle de version et gestion des branches à la manière de Git
- Fonctions et widgets Dart personnalisés
- Déploiement iOS, Android et web
- Intégration d’API avec en-têtes personnalisés
Mon expérience pratique avec FlutterFlow
FlutterFlow est présenté comme l’outil no-code « pour utilisateurs avancés ». Je me suis lancé dans la création d’une application permettant aux propriétaires de réserver des services tels que plomberie et électricité. Voici précisément ce qui s’est passé, du premier clic sur la page d’accueil à l’affichage du code.
1. Première étape : inscription et premières impressions
Le parcours a débuté sur la page d’accueil FlutterFlow.io. Le site est très moderne, avec des fonds sombres et des graphismes de haute qualité montrant l’interface.
Le grand titre « Build Better. Launch Faster. » m’a immédiatement sauté aux yeux. J’ai vite repéré une barre de navigation en haut avec les sections Product, Resources, Pricing, Enterprise et AI.
Un bouton « Log In » et un bouton lumineux « Start for Free ». Je n’ai pas hésité et j’ai cliqué sur « Start for Free ».
J’ai été redirigé vers la page d’inscription (app.flutterflow.io/create-account). Plusieurs options pour rejoindre :
- Se connecter avec Google
- Se connecter avec Apple
- Se connecter avec GitHub
- Se connecter avec Microsoft
J’ai opté pour la méthode standard : nom, adresse e-mail et mot de passe. Après confirmation, j’ai cliqué sur « Create Account ».
L’écran a clignoté, un logo FlutterFlow violet a tournoyé quelques secondes, puis j’ai été accueilli par une série de questions d’onboarding.
Ils veulent savoir qui vous êtes. FlutterFlow m’a demandé :
- Quel est votre rôle principal ? (J’ai choisi Développeur)
- Quelle description correspond le mieux à votre lieu de travail ? (J’ai sélectionné Startup)
- Avez-vous de l’expérience en codage ? (J’ai mis « Beaucoup »)
- Pour qui voulez-vous créer des applications ? (J’ai choisi « Mon entreprise »)
- Souhaitez-vous engager quelqu’un pour développer votre application ? (Un franc « Non » de ma part)
Après ces questions, un bouton « Start Building » est apparu. Un clic m’a mené au tableau de bord des projets, propre mais épuré.
J’ai cliqué sur « Create New » et une fenêtre s’est ouverte pour nommer le projet. Je l’ai appelé « Service Request Portal » et recliqué sur « Create New ».
Mon avis sur l’expérience d’inscription :
L’onboarding est un peu long, mais il permet clairement de personnaliser l’interface selon votre niveau. Ça fait professionnel et haut de gamme, comme si je m’inscrivais à un logiciel sérieux plutôt qu’à un simple jouet web. J’ai apprécié qu’ils reconnaissent immédiatement mon profil de « développeur ».
2. Navigation du tableau de bord et préparation
Après l’onboarding, j’ai atterri sur mon tableau de bord principal. Thème sombre, bouton « Create New » en haut à droite. Je l’ai cliqué, une fenêtre « Create a New Project » est apparue.
J’ai tapé « Service Request Portal ».
En dessous, de nombreux « Starter Apps » et catégories de templates :
- Business
- E-Commerce
- AI & Chat
- Dashboard/CRM
- Food & Delivery
J’aurais pu choisir un template, mais j’ai préféré une toile vierge. J’ai cliqué sur « Start Building ». Logo qui tourne, et me voilà dans l’éditeur.
Un tour guidé « Welcome to FlutterFlow » est apparu, avec « Skip » et « Next ».
J’ai cliqué sur « Next » plusieurs fois. Ça m’a montré les « Common UI Components » et l’« Widget Tree ». Puis un écran « Learn More » avec un lien vers une vidéo et un bouton « Start Building ». J’ai cliqué pour fermer le tour.
L’éditeur principal est riche. Au centre, un cadre de téléphone mobile vide. À gauche, une barre d’icônes :
- Widget Palette : éléments glisser-déposer (Text, Column, Row, Container, Image, Button, Icon).
- Widget Tree : vue hiérarchique des éléments de la page.
- Page Selector : pour naviguer entre les écrans.
- Firestore : pour la base de données.
- App Settings : l’icône en forme de roue dentée.
- AI Copilot : l’icône en forme d’étoile.
Mon avis sur le tableau de bord initial :
L’interface est dense. Ce n’est pas pour ceux qui veulent un « site web en cinq minutes ». Ça rappelle un IDE professionnel. Ceux qui ont utilisé Photoshop ou Figma s’y retrouveront, mais les habitués de constructeurs de sites basiques peuvent se sentir intimidés.
3. Ma première génération par IA
Je ne voulais pas tout créer à la main. J’avais entendu parler du « Copilot ». J’ai cliqué sur l’icône étoile, « Generate with AI (BETA) ».
Une fenêtre est apparue : « Describe the page you want to create… »
J’avais préparé ma description :
« A client portal where homeowners can request home services (plumbing, electrical, cleaning, landscaping) and track the status of their service requests. Include user authentication, a service request form with service type, description, date, and urgency fields, and a dashboard showing all requests with their status (pending, in progress, completed). »
J’ai aussi précisé la structure de données :
- Services Table : ID, Service Type, Description, Requested Date, Status, Urgency, Image.
- Users Table : ID, Name, Email, Phone, Address, Role (Customer/Admin).
Le compteur de caractères affichait « 737 / 1000 ». J’ai cliqué sur « Generate Page ».
Un message « Page generation started ». J’ai attendu environ 2 minutes, pensant que c’était peut-être bloqué, puis l’écran s’est rempli d’un design.
Le résultat s’appelait « HomeService Pro ». Presque complet :
- Un en-tête « Welcome back, Sarah » avec sous-titre « Your home services dashboard »
- Un gros bouton « New Request » dans une boîte violette
- Une grille de « Quick Actions » avec icônes pour Plomberie, Électricité, Ménage et Paysagisme
- Une liste « Recent Requests » affichant « Kitchen Sink Leak », « Deep House Cleaning » avec statuts « Pending » et « Complete »
Sur la gauche de la fenêtre IA, des cercles de couleur. Je les ai cliqués pour changer de thème.
Chaque clic mettait à jour les couleurs instantanément. Des noms de thèmes comme « Professional & Refined », « Tech AI », « Readex Pro ».
J’étais satisfait, j’ai cliqué sur « Insert Page ». On m’a demandé un nom de page. J’ai entré « ServicePortal », activé « Do you want to update entire project theme? » et cliqué sur « Create Page ».
Mon avis sur la génération par IA :
C’était la partie la plus impressionnante. Je m’attendais à un layout générique ; l’IA a suivi mes instructions spécifiques et inclus des icônes adaptées. Les sélecteurs de thème permettent de brander l’app en quelques secondes. J’ai gagné des heures de travail en moins d’une minute.
4. Gestion des erreurs et fonctionnalités « sous le capot »
Une fois la page insérée, j’ai vu un rond rouge « 1 » en haut à droite.
J’ai ouvert « Project Issues ». L’erreur : Entry Page is not an existing page in the project.
Comme j’avais supprimé la page « HomePage » d’origine, l’app ne savait pas quelle page afficher au lancement. J’ai trouvé dans « App Settings » → « General » le réglage « Initial Page » et sélectionné « ServicePortal ». L’erreur a disparu.
Je voulais voir le code. J’ai cliqué sur l’icône >. Une fenêtre « View Code » est apparue, « Generating code… », puis un éditeur avec service_portal_widget.dart. Des centaines de lignes de vrai code Dart, propres et lisibles.
Je pouvais basculer entre « Widget » et « Model ». Tout ce que j’avais fait était traduit en code en temps réel.
J’ai exploré d’autres icônes :
- Firestore : Création de collections Services et Users.
- Data Types : Définition de structures de données complexes.
- Custom Code : Fonctions, widgets et actions personnalisées, jusqu’au main.dart.
Mon avis sur les erreurs et la vue code :
Le message d’erreur était vague pour un débutant, mais le fait que l’outil signale immédiatement les problèmes est un gros plus. La vue code est un argument fort : on a vraiment l’impression de créer un « vrai » produit.
5. Aperçu et inspection de l’app
J’ai cliqué sur l’icône « œil » (Preview App). Un nouvel onglet a compilé l’app en environ une minute, puis j’ai pu tester dans un cadre de téléphone.
- Le défilement des « Recent Requests » était fluide.
- Les icônes « Plumbing » et « Electrical » répondaient au survol.
- J’ai cliqué sur « New Request ».
- Les données fictives incluaient « Outlet Installation », « Priority: Medium », « Scheduled: Tomorrow ».
Barre d’outils en haut de l’aperçu pour changer la taille : mobile (375×812), tablette (768×1024), desktop (1440×900). En mode desktop, le layout IA n’était pas entièrement réactif : les icônes s’étiraient trop sur la largeur.
Mon avis sur l’aperçu :
Le mode aperçu compile une version fonctionnelle, pas juste une image. Le temps de compilation est un peu long, mais le résultat est plus fidèle que chez d’autres builders. L’IA offre une base, mais il faut régler manuellement la réactivité pour un rendu optimal sur tous les écrans.
6. Connexion des données et intégrations
Ensuite, j’ai exploré la base de données. J’ai cliqué sur l’icône Firestore.
Aucune collection créée. Pour déployer, il faut :
- Créer des collections Services et Users.
- Rattacher un ID de projet Firebase dans les settings.
- Activer Firestore et Authentication.
Sous l’onglet API Calls, on peut ajouter des appels REST (GET/POST), définir les headers et tester depuis le builder.
Dans Media Assets, on peut uploader logos et images par glisser-déposer.
Enfin, Custom Code pour les fonctions, widgets et actions Dart personnalisés.
- Custom Functions : Snippets Dart pour calculs ou formatage.
- Custom Widgets : Pour des composants spécifiques non fournis.
- Custom Actions : Logique déclenchée par un bouton.
Mon avis sur les intégrations :
FlutterFlow gère efficacement les services externes. L’intégration Firebase est la plus poussée vue dans un outil no-code, et l’API/Custom Code garantit qu’on n’est jamais bloqué. Un outil évolutif.
7. Sécurité : version control et snapshots
J’ai cliqué sur l’icône Version Control (paths).
Le panneau montre la branche Main, avec trois onglets :
- Branches : Créer une branche dev sans altérer l’app live.
- Branch History : Journal de chaque modification.
- Snapshots : « Points d’instantané » pour revenir à un état précis.
On peut aussi Connect to a GitHub Repo, ce qui pousse chaque changement vers un dépôt GitHub.
Mon avis sur le version control :
Un véritable atout pour les équipes pro. Pas juste un Undo ; un système de versioning digne de Git. On expérimente sans crainte.
8. Publication : du test à la mise en production
En haut à droite, le panneau « Test, Run & Publish ».
Options :
- Test button (éclair violet) – itérations rapides
- FlutterFlow Local Run – app desktop pour tests locaux
Notice : « Vous devez activer la plateforme web dans les settings pour publier sur le web. »
En dessous, l’historique des builds/tests partageables.
Test mode : clic sur Test :
- « Preparing cloud resources… »
- « We are setting up a testing session for your app… »
- « This should take 2-3 minutes. »
En attendant, un tip s’affiche : « FlutterFlow Tip #10: Master Layouts in FlutterFlow » avec un lien vers une vidéo.
L’app se charge en mode test :
- Session actuelle – expire dans 11 minutes
- Bouton « End Session » (rouge)
- Bouton « Instant Reload » (vert)
- Onglets « Known Issues », « Troubleshooting Info », « Debug Panel »
- Aperçu live à 100 % zoom
Mon avis sur le workflow de test :
Le mode test favorise l’itération rapide. La limite de temps (11 minutes) pousse à se concentrer sur un objectif précis. « Instant Reload » permet de voir instantanément les changements, et le Debug Panel offre un retour console en temps réel.
Mon verdict global sur FlutterFlow
Après cette session, mon avis est clair : c’est un outil sérieux pour des utilisateurs sérieux.
Si vous voulez juste une page de destination ou un outil interne simple, c’est sans doute trop. Vous passerez plus de temps à apprivoiser l’interface qu’à construire.
En revanche, pour un fondateur technique créant un MVP mobile, ou un développeur souhaitant un prototypage 10× plus rapide, c’est une plateforme exceptionnelle.
Ce que j’ai adoré :
- L’IA est vraiment utile : Elle suit mes instructions et crée une page contextuelle.
- Transparence totale : On peut voir le code à tout moment, jamais de « lock-in ». Exportez et hébergez où vous voulez.
- Fonctionnalités pro : Contrôle de version, Firestore, génération IA… vous ne vous essoufflerez pas.
Points de vigilance :
- Courbe d’apprentissage : Ce n’est pas un « easy mode ». Il faut maîtriser les layouts mobiles.
- Compilation lente : Le build pour l’aperçu prend du temps, pas de feedback instantané comme certains builders web.
Tarifs et abonnements
FlutterFlow propose quatre formules principales avec réductions régionales. Toutes incluent le builder visuel, mais varient selon la collaboration, le déploiement et les quotas d’IA.
| Plan | Prix (mensuel) | Projets | Requêtes IA | Téléchargement code | Taille équipe | Idéal pour |
|---|---|---|---|---|---|---|
| Free | 0 $ | 2 | 5 (à vie) | ✗ | 1 | Découverte |
| Basic | 15,60 $ | Illimité | 50/mois | ✓ | 1 | Solo |
| Growth | 32 $ (1er siège) | Illimité | 200/mois | ✓ | 2 | Petites équipes |
| Business | 60 $ (1er siège) | Illimité | 500/mois | ✓ | 5 | PME en croissance |
Détails de paiement
- Méthodes acceptées : Carte bancaire, PayPal
- Remise annuelle : Environ 25 % d’économie en facturation annuelle
- Politique de remboursement : Garantie satisfait ou remboursé 14 jours sur le premier achat
- Coûts cachés : Connexion de domaines supplémentaires à 10 $/mois par domaine. Collaborateurs additionnels à 10 $/place (Growth) et 8 $/place (Business).
Alternative à FlutterFlow
Si votre objectif est une application web complexe avec logique back-end intégrée, une excellente alternative est Bubble.
Bubble fonctionne comme une application web avec son propre runtime. Pensez à FlutterFlow comme un outil mobile-first qui supporte le web, et Bubble comme un outil web-first adaptable aux navigateurs mobiles.
| Fonctionnalité | FlutterFlow | Bubble |
|---|---|---|
| Facilité d’utilisation | Interface structurée, système de widgets familier aux devs. Courbe plus raide pour le back-end (Firebase/Supabase). | Puissant mais complexe. Workflows visuels et gestion de base de données intégrés. Long à maîtriser. |
| Idéal pour | Apps mobiles natives (iOS/Android) avec support hors ligne et fonctionnalités de l’appareil (caméra, GPS, push). | Applications web, SaaS, marketplaces, dashboards internes nécessitant une logique complexe. |
| Apps mobiles | Apps natives via Flutter. Déploiement direct sur App Store et Play Store. Performance fluide et support offline. | PWAs pour mobiles. Pas véritablement natif. Nécessite des outils tiers pour stores. |
| Back-end & données | Nécessite un back-end externe (Firebase, Supabase, REST APIs). Plus de setup mais flexibilité et scalabilité. | Back-end intégré avec base, workflows et auth. Tout dans un même écosystème, mais moins flexible. |
| Flexibilité du design | Système de widgets préconçus. Layouts mobiles optimisés. Import Figma sur niveaux supérieurs. | Très personnalisable pour le web. Design réactif mobile peut être délicat. Contrôle global supérieur. |
| Performance | Performance quasi-native. Apps compilées en code Flutter efficace. Animations complexes gérées sans accroc. | Performance web pouvant se dégrader avec la complexité. Optimisation nécessaire pour les apps lourdes. |
| Tarification | À partir de 15,60 $/mois. Export de code inclus en Basic. Paiement additionnel par collaborateur sur Growth/Business. | À partir de 42 $/mois pour mobile. Tarification selon charge (serveurs). Pas d’export de code. |
| Propriété du code | Export complet du code Flutter sur tous les plans payants. Hébergez et modifiez où vous voulez. | Pas d’export. Apps restent sur l’infrastructure Bubble. Partir signifie tout reconstruire ailleurs. |
La différence clé : FlutterFlow suppose que vous apportez votre back-end et offre l’export de code. Bubble regroupe tout mais vous enferme dans son écosystème. Aucun n’est « meilleur », juste optimisé pour des usages différents.
Verdict final sur FlutterFlow
FlutterFlow est un outil sérieux pour des créateurs sérieux. Si vous avez besoin d’une app mobile native sur App Store ou Google Play, c’est l’un des moyens les plus rapides d’aller de l’idée à la production.
La génération IA fonctionne vraiment, l’intégration Firebase est transparente, et l’export de code garantit l’absence de lock-in.
Mais la courbe d’apprentissage est réelle. Il faut comprendre les structures de données, les appels d’API et les layouts réactifs. Pour une simple application web, Bubble ou Softr sont plus rapides à prendre en main.
Le point idéal : fondateurs techniques développant un MVP mobile, développeurs souhaitant prototyper 10× plus vite, ou petites équipes avec au moins une personne maîtrisant l’architecture back-end.
