17 Nov 2025

Masterclass FlutterFlow : Créer un Assistant IA Mobile en 1 Heure (Sans Coder)

Laurent SEVENIER

L'intelligence artificielle et le no-code convergent pour démocratiser la création d'applications mobiles. Plus besoin d'être développeur pour intégrer un assistant IA conversationnel dans une app iOS ou Android. C'est ce que nous avons démontré lors de notre dernière masterclass avec Franco Muoio, Product Builder et formateur FlutterFlow

En une heure, Franco a construit en direct un agent IA mobile fonctionnel. Zéro ligne de code.

FlutterFlow + Firebase : la combinaison gagnante

FlutterFlow, c'est un éditeur visuel qui génère automatiquement du code Flutter (le SDK développé par Google). Concrètement :

✅ Interface par glisser-déposer✅ Applications cross-platform (iOS, Android, Web)✅ Intégrations natives (Firebase, Stripe, Revenue Cat...)✅ Export du code possible (pas d'enfermement)

Ce qui séduit Franco ? La solidité de la base technique. Flutter, c'est du code de production utilisé par des millions d'apps. FlutterFlow le rend accessible sans sacrifier la qualité.

Firebase : le back-end Google Cloud

Firebase, c'est le moteur qui fait vivre votre application :

✅ Authentification robuste (email, Google, Apple, anonyme...)✅ Base de données Firestore✅ Stockage cloud✅ AI Logic : la nouvelle brique qui intègre l'IA générative

C'est cette dernière fonctionnalité qui change la donne. Plus besoin de configurer manuellement des API OpenAI ou Anthropic. Tout est intégré.

FlutterFlow, c'est un éditeur visuel qui génère automatiquement du code Flutter (le SDK développé par Google). Concrètement :

✅ Interface par glisser-déposer✅ Applications cross-platform (iOS, Android, Web)✅ Intégrations natives (Firebase, Stripe, Revenue Cat...)✅ Export du code possible (pas d'enfermement)

Ce qui séduit Franco ? La solidité de la base technique. Flutter, c'est du code de production utilisé par des millions d'apps. FlutterFlow le rend accessible sans sacrifier la qualité.

Le programme de la masterclass

1. Les fondations

On ne plonge pas directement dans le code (ou plutôt le no-code). Franco pose d'abord les bases :

1. Comprendre la différence front-end / back-end
2. Pourquoi choisir FlutterFlow plutôt qu'un autre outil
3. Comment Firebase s'intègre nativement dans l'écosystème

L'analogie qui fait tilt : FlutterFlow, c'est la carrosserie de votre voiture. Firebase, c'est le moteur.

2. Configuration du projet

Étape critique : connecter FlutterFlow et Firebase. Deux options :

1. À la création du projet → une pop-up propose la connexion automatique
2. Après coup → via Paramètres → Firebase → Project Setup Wizard

Ensuite, on active les services Firebase indispensables :

✅ Authentification (mode anonyme pour tester rapidement)✅ Formule Blaze (paiement à l'usage, quelques centimes pour les tests)✅ AI Logic (la brique IA de Firebase)

Franco insiste : sans ces trois éléments, votre agent IA ne fonctionnera pas.

3. Construire l'interface de chat

Ici, Franco détaille l'anatomie d'une page FlutterFlow :

Le Widget Scaffold (la structure de base) contient :

1. AppBar (en haut) : bouton retour, titre, actions
2. Body (centre) : le contenu principal
3. NavBar (en bas, optionnel) : navigation entre pages

Pour créer l'interface de chat, on utilise trois widgets fondamentaux :

🔹 Column : aligner des éléments verticalement🔹 Row : aligner des éléments horizontalement🔹 Container : enrober un élément avec du style (couleur, bordures, ombres)

Point d'attention : un Container ne peut contenir qu'un seul élément. Pour en mettre plusieurs ? On imbrique une Column ou une Row à l'intérieur.

4. Créer l'agent IA

C'est là que la magie opère. FlutterFlow intègre désormais un onglet AI Agent dédié.

Configuration en 5 champs :

1. Nom : AgentChat
2. System Message : la mission de votre agent ("Tu es un assistant IA serviable et bienveillant...")
3. Provider : Google (Gemini), OpenAI, ou Anthropic
4. Model : gemini-1.5-flash (rapide et économique)
5. Format de réponse : Markdown (pour une belle mise en forme)

Franco partage une astuce : personnaliser le System Message pour créer des agents spécialisés (coach sportif, assistant nutritionnel, support client...).

5. Gérer les données locales

Pour afficher l'historique de conversation, on utilise des Page States (données locales temporaires).

Structure de données :

1. Data Type "Message" avec deux champs :content (String) : le texte du messagerole (Enum) : user ou assistant
2. content (String) : le texte du message
3. role (Enum) : user ou assistant

Pourquoi un Enum ? Pour éviter les fautes de frappe. Vous sélectionnez "user" ou "assistant" dans une liste, impossible de se tromper.

6. Programmer les actions

Quand l'utilisateur appuie sur "Envoyer", une séquence de 4 actions se déclenche :

1. Ajouter le message utilisateur à la liste locale
2. Appeler l'agent IA avec le prompt
3. Ajouter la réponse de l'assistant à la liste
4. Vider le champ de texte

Le tour de force ? L'agent mémorise la conversation grâce à un conversationID. C'est ce qui lui permet de dire "Excellente question !" en référence à un échange précédent.

7. Déployer l'application

FlutterFlow simplifie radicalement le déploiement :

📱 Mobile :

1. Connectez vos comptes développeur (Apple 99€/an, Google 25€ à vie)
2. Cliquez sur "Deploy to App Store" ou "Deploy to Play Store"
3. FlutterFlow génère automatiquement le build

🌐 Web :

1. Un clic sur "Publish to Web"
2. Votre app est en ligne en quelques secondes sur votreprojet.flutterflow.app
3. Possibilité d'ajouter un nom de domaine personnalisé

L'option avancée : exporter le code Flutter et l'héberger vous-même. Pour ceux qui veulent garder le contrôle total.

Ressources

👉 Rejoindre Inpulp Académie NoCode et IA

👉Se former à Flutterflow https://inpulp.tech/les-formations/formation-flutterflow