Configurer votre backend Supabase

Créez un projet Supabase. Pour une application de gestion de tâches, voici le schéma de base :

CREATE TABLE tasks ( id bigserial PRIMARY KEY, title text NOT NULL, completed boolean DEFAULT false, user_id uuid REFERENCES auth.users(id), created_at timestamptz DEFAULT now() );

ALTER TABLE tasks ENABLE ROW LEVEL SECURITY; CREATE POLICY "user owns tasks" ON tasks FOR ALL USING (auth.uid() = user_id);

Copiez l'URL de votre projet Supabase et la clé anon — vous en aurez besoin dans FlutterFlow. La politique RLS (Row Level Security) garantit que chaque utilisateur ne peut accéder qu'à ses propres tâches, ce qui est essentiel pour la conformité RGPD et la sécurité des données.

Connecter FlutterFlow à Supabase

Dans FlutterFlow, allez dans Paramètres → Supabase. Collez votre URL Supabase et votre clé anon. FlutterFlow s'authentifiera et affichera votre schéma de base de données.

Vous verrez votre table tasks listée avec toutes les colonnes. FlutterFlow génère automatiquement des constructeurs de requêtes typés pour chaque table — pas de SQL nécessaire dans le frontend.

Une fois connecté, FlutterFlow reflète automatiquement toute modification du schéma Supabase. Si vous ajoutez une colonne, elle apparaît instantanément dans l'interface FlutterFlow. Cette synchronisation bidirectionnelle est l'un des grands avantages de l'utilisation de ces deux outils ensemble. Vérifiez également que votre projet Supabase est hébergé dans la région Europe (Frankfurt ou London) pour optimiser la latence pour vos utilisateurs français.

Construire l'authentification

Utilisez les actions d'authentification Supabase de FlutterFlow pour la connexion et l'inscription. Créez : 1. Une page de connexion avec des champs email/mot de passe et un bouton "Se connecter" 2. Une page d'inscription avec email, mot de passe et confirmation du mot de passe 3. Connectez les actions OnTap des boutons à "Log In with Email" et "Create Account with Email" (les deux sont des actions d'authentification Supabase)

Définissez la logique "Page initiale" : si l'utilisateur est authentifié → Page d'accueil, sinon → Page de connexion.

Pour les applications françaises, pensez à ajouter une case à cocher d'acceptation des CGU et de la politique de confidentialité conforme au RGPD lors de l'inscription. Ce n'est pas optionnel pour les applications distribuées dans l'Espace économique européen.

Construire l'écran de liste de tâches

Créez un composant ListView. Définissez la source de données sur votre table tasks Supabase. Ajoutez un filtre : user_id = currentAuthUser.uid (FlutterFlow complète automatiquement ceci).

Pour chaque élément de la liste : affichez le titre de la tâche, une case à cocher pour l'état d'achèvement et un bouton de suppression. Connectez la case à cocher à une action Supabase UPDATE (mettre à jour completed = true/false). Connectez le bouton de suppression à une action Supabase DELETE.

Ajoutez également un FloatingActionButton pour créer de nouvelles tâches. L'action OnTap ouvre une BottomSheet avec un champ texte pour le titre et un bouton "Ajouter". L'action du bouton effectue un Supabase INSERT avec title = valeur du champ et user_id = currentAuthUser.uid.

Ajouter des abonnements en temps réel

Dans les paramètres Supabase de FlutterFlow, activez Realtime pour la table tasks. Dans votre composant de liste de tâches, activez "Realtime" sur la source de données.

Maintenant, lorsqu'une tâche est ajoutée, mise à jour ou supprimée (depuis n'importe quel appareil), votre liste se rafraîchit automatiquement — aucun polling manuel nécessaire.

C'est l'une des fonctionnalités les plus impressionnantes de cette stack : sans une seule ligne de code, vous avez une synchronisation en temps réel sur tous les appareils. Pour une application collaborative où plusieurs utilisateurs partagent des données, activez Realtime sur toutes les tables pertinentes et filtrez par les données partagées (par exemple, project_id commun).

Soumettre sur l'App Store et le Google Play

Dans FlutterFlow, allez dans Run → Build → iOS et Android.

Pour iOS : vous avez besoin d'un compte Apple Developer (99 €/an). FlutterFlow génère le fichier .ipa. Soumettez via Xcode ou Transporter. Pensez à remplir les informations de confidentialité selon les exigences Apple (notamment pour la conformité RGPD).

Pour Android : FlutterFlow génère un fichier .aab signé. Soumettez via la Google Play Console. Renseignez le formulaire de déclaration de sécurité des données (Data Safety section).

La première soumission prend 1 à 3 jours pour la révision. Les mises à jour sont généralement examinées en 24 heures. Pour les applications destinées au marché français ou européen, assurez-vous que votre politique de confidentialité est rédigée en français et conforme au RGPD avant la soumission — les stores ont durci les contrôles à ce sujet depuis 2023.