Qu'est-ce que FlutterFlow exactement ?

FlutterFlow est un constructeur d'applications visuel qui génère du code Flutter (le framework de Google pour les applications multi-plateformes). Concrètement :

- Vous construisez visuellement dans un éditeur drag-and-drop - FlutterFlow génère du code Dart/Flutter en arrière-plan - Vous publiez directement sur l'App Store (iOS) et Google Play (Android) - Vous pouvez aussi exporter le code source Flutter si besoin

La différence avec Bubble ou WeWeb : FlutterFlow produit des applications natives compilées. Pas une WebView, pas un site web responsive — une vraie app avec animations fluides, performances natives, et accès aux fonctionnalités du téléphone (caméra, GPS, biométrie, NFC).

Pour les fondateurs français qui construisent une app mobile, FlutterFlow combine la vitesse du no-code avec la crédibilité d'une application native sur les stores — ce qui est souvent un argument commercial important auprès des clients B2B ou des investisseurs.

Premiers pas : créer votre projet

1. Créer un compte Flutterflow.io → Sign up. La version gratuite permet de construire et tester, mais pas de publier sur les stores sans abonnement.

2. Nouveau projet Choisissez entre partir de zéro, utiliser un template, ou importer un fichier Figma. Pour un premier projet, un template adapté à votre cas d'usage vous fait gagner plusieurs heures.

3. L'interface FlutterFlow - Canvas (centre) : aperçu visuel de votre app - Widget Tree (gauche) : arborescence des composants - Properties Panel (droite) : propriétés du composant sélectionné - Action Flow Editor : logique et interactions - Data Schema : définition de vos types de données

4. Connecter Supabase Settings (engrenage) → Integrations → Supabase → Enter URL & Anon Key. FlutterFlow importe automatiquement toutes vos tables. Vous pouvez maintenant binder des éléments UI directement à des colonnes Supabase — c'est ce binding automatique qui vous fait gagner des dizaines d'heures sur chaque projet.

Construire vos premiers écrans

Écran d'authentification FlutterFlow a des composants Auth natifs. Glissez un composant "Login Form" ou "Sign Up Form" sur votre écran. Activez Supabase Auth dans les settings → tous les flows d'inscription/connexion sont automatiques.

Liste de données Glissez un composant "ListView". Dans les propriétés, sélectionnez votre Supabase Collection comme source. FlutterFlow génère automatiquement les requêtes et le rendu de la liste. Utilisez les filtres et tris intégrés pour affiner ce qui est affiché.

Page de détail Créez une nouvelle page. Ajoutez un "Page Parameter" du type de votre entité. Les éléments de la page se lient aux champs du paramètre.

Navigation Sélectionnez un bouton → Add Action → Navigate → choisissez la page destination. Passez des paramètres si nécessaire. FlutterFlow gère la navigation et l'historique automatiquement — vous obtenez le comportement natif de navigation iOS et Android sans écrire une ligne de code.

La logique avec les Action Flows

Les Actions Flows sont le système de logique de FlutterFlow — l'équivalent visuel du code JavaScript.

Exemple : créer un projet 1. Bouton "Créer" → Add Action 2. Backend Call → Supabase → Insert Row dans la table projects 3. Champs mappés depuis les TextFields de la page 4. On Success → Navigate to project detail page 5. On Error → Show Snackbar "Une erreur est survenue"

Variables d'état FlutterFlow a trois niveaux de variables : - Page State : variable locale à une page (état d'un formulaire, loading state) - App State : variable globale partagée entre toutes les pages (ex : utilisateur connecté, préférences) - Authenticated User : données de l'utilisateur connecté, accessible partout

Pour les données complexes, utilisez des Custom Types (structs) que vous définissez dans le Data Schema. C'est la façon correcte de modéliser des entités métier dans FlutterFlow, plutôt que d'empiler des variables scalaires.

Tester et déboguer

Mode Preview (navigateur) Rapide pour tester les layouts, mais ne reproduit pas fidèlement iOS/Android. N'utilisez pas le preview comme seul outil de test — vous manquerez des problèmes de comportement natif.

Test Mode (sur appareil physique) Dans FlutterFlow → Run → Test Mode. Un QR code apparaît. Scannez-le avec votre iPhone/Android — l'app s'installe directement. C'est l'équivalent d'un build de développement, avec hot reload.

Testez sur : - iPhone récent (iPhone 14 ou 15) - iPhone petit (iPhone SE pour vérifier les petits écrans) - Android récent (Samsung, Pixel) - Android bas de gamme si votre cible utilise des appareils abordables

Logs et erreurs FlutterFlow affiche les erreurs dans la console du navigateur (F12 → Console). Les erreurs Supabase sont visibles dans les logs Supabase Dashboard → Logs → API Logs. Pour les erreurs liées aux politiques RLS, cherchez les erreurs 401 ou 403 dans les logs API.

Publier sur l'App Store et Google Play

Prérequis - Apple : compte Apple Developer (99 $/an), Mac avec Xcode (ou FlutterFlow cloud build) - Google : compte Google Play Developer (25 $ unique)

Avec FlutterFlow Cloud Build (recommandé) FlutterFlow → Run → Deploy → iOS App Store ou Android Play Store. FlutterFlow compile le code dans le cloud — pas besoin de Mac pour iOS. Cette option simplifie considérablement le processus pour les équipes sans profil DevOps.

Checklist avant soumission - Politique de confidentialité liée dans l'app et la fiche store - Suppression de compte accessible depuis l'app (obligatoire Apple depuis 2023) - Sign in with Apple activé si vous proposez Google Login (obligation Apple) - Screenshots pour toutes les tailles d'écran requises - Description et mots-clés optimisés en français pour le marché français - Pas d'images placeholder ou de contenu de test visible

Le review Apple prend généralement 1-3 jours. Google Play est plus rapide (quelques heures à 1 jour). Soumettez avec 2 semaines de marge avant votre date de lancement prévue.