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).

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.

**2. Nouveau projet** Choisissez entre partir de zéro, utiliser un template, ou importer un fichier Figma.

**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.

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.

**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.

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
- **Authenticated User** : données de l'utilisateur connecté, accessible partout

Pour les données complexes, utilisez des Custom Types (struct équivalents) que vous définissez dans le Data Schema.

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.

**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.

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).

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.

**Checklist avant soumission** - Politique de confidentialité liée dans l'app et la fiche store - Suppression de compte accessible (obligatoire Apple) - Sign in with Apple activé si vous proposez Google Login (obligatoire Apple) - Screenshots pour toutes les tailles d'écran requises - Description et mots-clés optimisés - 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).