Flutter pour débutants : créer une application iOS et Android avec Dart, VS Code et l'IA

Flutter est un framework open source créé par Google qui permet de développer une application mobile pour iOS et Android à partir d’un seul code source, écrit en langage Dart. Vous concevez l’interface une fois, vous la testez instantanément grâce au Hot Reload, puis vous compilez une application native pour chaque plateforme, ainsi que pour le web et le bureau si besoin.

Ce guide s’adresse aux débutants qui veulent créer une application mobile sans apprendre deux langages différents, aux développeurs web qui souhaitent passer au mobile et aux porteurs de projet qui veulent comprendre ce qu’implique un développement Flutter. Vous y verrez comment installer l’environnement, comprendre la structure d’un projet, écrire vos premiers widgets, tester sur émulateur, utiliser l’IA dans VS Code et préparer la publication.

Qu’est-ce que Flutter ?

Flutter est un kit de développement d’interfaces (SDK) qui compile un même code Dart en applications pour Android, iOS, web, Windows, macOS et Linux. Au lieu d’utiliser les composants graphiques de chaque système, il dessine lui-même son interface avec son propre moteur de rendu, ce qui assure un affichage identique sur tous les appareils.

Trois notions résument Flutter :

• Dart, le langage : typé, orienté objet, avec une syntaxe familière pour qui connaît JavaScript, Java ou C#.
• Les widgets : tout élément d’interface (texte, bouton, marge, colonne, écran entier) est un widget, et une application est un arbre de widgets imbriqués.
• Le Hot Reload : chaque modification enregistrée est injectée dans l’application en cours d’exécution, presque instantanément.

Pourquoi utiliser Flutter pour créer une application mobile ?

• Un seul code pour iOS et Android : moins de temps de développement, une seule équipe, une seule base à maintenir.
• Un rendu cohérent : l’application a la même apparence sur tous les téléphones, quelle que soit la version du système.
• Une boucle de développement très rapide : le Hot Reload permet d’ajuster un espacement ou une couleur et de voir le résultat sans relancer l’application.
• Des performances proches du natif : le code Dart est compilé en code machine pour les versions de production.
• Un écosystème riche : des milliers de paquets sur pub.dev pour les appels réseau, le stockage local, les cartes, les notifications ou les paiements.
• Au-delà du mobile : le même projet peut viser le web ou le bureau.

Flutter convient bien aux applications métier, aux applications de services, aux prototypes et aux applications grand public. Pour une application interne très simple reliée à Microsoft 365, une solution low-code comme Power Apps peut suffire ; pour un jeu, un moteur spécialisé comme Godot sera plus adapté.

Comment créer une application avec Flutter : les étapes

Étape 1 — Installer le SDK Flutter et vérifier l’environnement

Rendez-vous sur le site officiel flutter.dev et suivez le guide d’installation pour votre système. Vous aurez besoin :

• du SDK Flutter, qui inclut Dart ;
• de Visual Studio Code avec les extensions officielles Flutter et Dart ;
• d’Android Studio, pour le SDK Android et l’émulateur ;
• sur Mac uniquement, de Xcode pour cibler iOS.

Ouvrez ensuite un terminal et lancez le diagnostic :

flutter doctor

La commande liste chaque composant avec une coche ou un avertissement, et indique la marche à suivre pour corriger : accepter les licences Android (flutter doctor --android-licenses), installer un outil manquant, etc. Ne passez pas à la suite tant que les lignes Flutter, Android toolchain et VS Code ne sont pas validées.

Étape 2 — Créer votre premier projet

Dans VS Code, ouvrez la palette de commandes (Ctrl+Maj+P, ou Cmd+Maj+P sur Mac), tapez « Flutter: New Project » et choisissez une application. Ou, en ligne de commande :

flutter create mon_app
cd mon_app
flutter run

Le nom du projet s’écrit en minuscules, avec des tirets bas. Flutter génère une application de démonstration : un compteur qui s’incrémente quand on appuie sur un bouton.

Étape 3 — Comprendre la structure du projet

Élément	Rôle
lib/main.dart	Point d’entrée de l’application, c’est là que vous écrivez votre code
pubspec.yaml	Nom, version, dépendances (paquets), polices et images du projet
android/, ios/	Projets natifs générés, à modifier pour les réglages de plateforme (icône, permissions, signature)
web/, windows/, macos/, linux/	Cibles supplémentaires, si activées
test/	Tests automatisés
assets/ (à créer)	Images, fichiers de données, polices personnalisées

Pour ajouter un paquet, par exemple une bibliothèque d’appels HTTP :

flutter pub add http

Étape 4 — Lire et écrire les bases de Dart

Avant d’aller plus loin, quelques lignes de Dart suffisent pour comprendre le code Flutter. Vous pouvez les tester sans rien installer sur DartPad, l’éditeur en ligne officiel.

void main() {
  String prenom = 'Camille';       // chaîne de caractères
  int age = 28;                    // entier
  final ville = 'Lyon';            // valeur fixée une fois pour toutes
  List<String> taches = ['Courses', 'Sport'];

  if (age >= 18) {
    print('$prenom est majeure et habite à $ville.');
  }

  for (final tache in taches) {
    print('À faire : $tache');
  }

  print(saluer(prenom));
}

String saluer(String nom) => 'Bonjour $nom !';

Dart impose la sécurité face aux valeurs nulles : une variable ne peut contenir null que si son type le déclare explicitement, par exemple String?. Cette contrainte évite une grande partie des plantages classiques.

Étape 5 — Construire une interface avec les widgets

Remplacez le contenu de lib/main.dart par cette application minimale :

import 'package:flutter/material.dart';

void main() => runApp(const MonApp());

class MonApp extends StatelessWidget {
  const MonApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ma liste',
      theme: ThemeData(colorSchemeSeed: Colors.teal),
      home: const EcranAccueil(),
    );
  }
}

class EcranAccueil extends StatefulWidget {
  const EcranAccueil({super.key});

  @override
  State<EcranAccueil> createState() => _EcranAccueilState();
}

class _EcranAccueilState extends State<EcranAccueil> {
  final List<String> _taches = [];
  final TextEditingController _saisie = TextEditingController();

  void _ajouter() {
    if (_saisie.text.trim().isEmpty) return;
    setState(() {
      _taches.add(_saisie.text.trim());
      _saisie.clear();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Mes tâches')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(child: TextField(controller: _saisie)),
                const SizedBox(width: 8),
                ElevatedButton(onPressed: _ajouter, child: const Text('Ajouter')),
              ],
            ),
            Expanded(
              child: ListView.builder(
                itemCount: _taches.length,
                itemBuilder: (context, i) => ListTile(title: Text(_taches[i])),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Ce qu’il faut retenir :

• StatelessWidget affiche des données qui ne changent pas ; StatefulWidget possède un état modifiable.
• setState() signale à Flutter que l’état a changé : l’écran est reconstruit avec les nouvelles données.
• Scaffold fournit la structure d’un écran (barre d’application, corps, bouton flottant) ; Column et Row empilent verticalement et horizontalement ; Expanded occupe l’espace restant ; Padding et SizedBox gèrent les espacements.

Étape 6 — Tester avec le Hot Reload et l’émulateur Android

Dans Android Studio, ouvrez le gestionnaire d’appareils virtuels et créez un émulateur. Dans VS Code, sélectionnez-le dans la barre d’état en bas à droite, puis lancez l’application avec F5.

Modifiez un texte ou une couleur et enregistrez : le Hot Reload met à jour l’écran en conservant l’état (vos tâches restent dans la liste). Si vous modifiez la structure de l’état ou la fonction main, utilisez le Hot Restart, qui relance l’application en réinitialisant l’état. En ligne de commande, pendant un flutter run, les touches r et R déclenchent respectivement l’un et l’autre.

Pensez aussi à tester sur un vrai téléphone Android : activez les options pour les développeurs et le débogage USB, branchez l’appareil, il apparaît dans la liste.

Aller plus loin : navigation, données et gestion d’état

Une vraie application compte plusieurs écrans. Le moyen le plus simple de passer de l’un à l’autre est le Navigator intégré :

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const EcranDetail()),
);

// Retour à l'écran précédent
Navigator.pop(context);

Pour des applications plus grandes, avec des adresses d’écran et des liens profonds, beaucoup d’équipes adoptent le paquet go_router, qui centralise toutes les routes dans un seul fichier.

Les données viennent souvent d’une API. Avec le paquet http, on récupère un contenu JSON dans une fonction asynchrone (async / await), puis on l’affiche avec le widget FutureBuilder, qui gère l’attente, l’erreur et l’affichage du résultat. Pour conserver des informations sur le téléphone, des paquets permettent de stocker des préférences simples ou une base de données locale.

Enfin, quand plusieurs écrans partagent les mêmes données (un panier, un utilisateur connecté), setState() ne suffit plus. Il faut une solution de gestion d’état : Provider, Riverpod ou Bloc sont les plus répandues. Notre conseil : n’en adoptez une qu’au moment où vous en ressentez le besoin, après avoir bien compris la logique de setState(). Commencer par une architecture complexe est la meilleure façon de se décourager.

Organisez aussi votre code dès que le fichier main.dart dépasse une centaine de lignes : un dossier screens pour les écrans, widgets pour les composants réutilisables, models pour les classes de données et services pour les appels réseau.

Utiliser l’IA dans VS Code pour coder en Flutter

Les assistants de code intégrés à Visual Studio Code, comme GitHub Copilot, accélèrent nettement le développement Flutter. Les usages les plus utiles :

• Générer un widget à partir d’une description : « un écran de connexion avec deux champs, un bouton et un lien mot de passe oublié ».
• Expliquer un code existant : sélectionnez un bloc et demandez ce qu’il fait, ligne par ligne.
• Corriger une erreur : collez le message de la console, l’assistant propose une cause et une correction.
• Refactoriser : extraire un morceau d’interface dans un widget séparé, renommer proprement.
• Écrire des tests pour une fonction de calcul ou de validation.

Notre conseil : demandez des morceaux courts, relisez tout et testez immédiatement avec le Hot Reload. Une IA peut proposer une API obsolète ou un paquet qui n’existe plus ; vérifiez sur la documentation officielle et sur pub.dev. Les outils de génération d’applications complètes comme Bolt.new sont utiles pour prototyper, mais comprendre le code reste indispensable pour le faire évoluer.

Préparer la publication : compilation et signature

Android

Une application publiée sur Google Play doit être signée avec une clé qui vous identifie. On crée une clé d’envoi avec l’outil keytool fourni avec Java :

keytool -genkey -v -keystore upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

On renseigne ensuite le chemin du fichier et les mots de passe dans un fichier key.properties du dossier android, lu par la configuration Gradle, en suivant le guide de déploiement Android de la documentation Flutter. Ce fichier et la clé ne doivent jamais être versionnés ni partagés : ajoutez-les au .gitignore. Puis compilez le format attendu par le Play Store :

flutter build appbundle

Avant cela, mettez à jour le nom affiché, l’identifiant unique de l’application, l’icône et le numéro de version dans pubspec.yaml (par exemple version: 1.0.0+1).

iOS

La publication sur l’App Store se fait depuis un Mac avec Xcode, avec un compte du programme développeur Apple. On configure la signature dans Xcode, puis on génère l’archive (flutter build ipa) et on l’envoie à App Store Connect pour les tests et la validation.

Les erreurs fréquentes des débutants Flutter

Erreur	Cause	Solution
« A RenderFlex overflowed » (bandes jaunes et noires)	Le contenu d’une Row ou d’une Column dépasse l’espace disponible	Envelopper l’élément dans Expanded ou Flexible, ou rendre la zone défilante
L’écran ne se met pas à jour	Variable modifiée sans setState()	Modifier l’état à l’intérieur de setState()
Le Hot Reload n’applique pas la modification	Changement dans main() ou dans l’état initial	Utiliser le Hot Restart
ListView dans une Column qui plante	Hauteur infinie non contrainte	Placer la ListView dans un Expanded
Erreur de valeur nulle	Variable nullable utilisée sans vérification	Déclarer correctement le type et tester la valeur
Émulateur introuvable	SDK Android ou licences non configurés	Relancer flutter doctor et suivre les indications
Clé de signature perdue ou publiée	Fichier non sauvegardé ou versionné par erreur	Sauvegarder la clé en lieu sûr, l’exclure du dépôt Git

Versionnez votre projet dès le premier jour : notre guide pour apprendre Git explique comment garder un historique propre et revenir en arrière après une erreur.

Flutter, React Native ou développement natif : comparaison

Critère	Flutter	React Native	Natif (Kotlin / Swift)
Langage	Dart	JavaScript / TypeScript	Kotlin pour Android, Swift pour iOS
Code partagé entre iOS et Android	Oui, presque entièrement	Oui, en grande partie	Non, deux applications
Rendu de l’interface	Moteur propre, identique partout	Composants natifs de chaque système	Composants natifs
Rechargement à chaud	Oui (Hot Reload)	Oui (Fast Refresh)	Plus limité
Profil idéal	Débutants, équipes voulant un code unique	Équipes déjà expertes en JavaScript et React	Applications très spécifiques à une plateforme

Si vous venez du web et maîtrisez déjà JavaScript, React Native est une option naturelle. Si vous partez de zéro ou voulez un rendu parfaitement maîtrisé, Flutter est souvent le chemin le plus direct.

Comment apprendre Flutter efficacement ?

Voici le parcours que nous recommandons :

1. Installation et découverte (1 à 2 heures) : SDK, VS Code, Android Studio, flutter doctor, première application de démonstration.
2. Bases de Dart : variables, types, conditions, boucles, fonctions, classes, sécurité face aux valeurs nulles, sur DartPad.
3. Widgets et mise en page : Scaffold, Column, Row, Container, ListView, puis StatefulWidget et setState().
4. Plusieurs écrans : navigation, formulaires, appels à une API, stockage local.
5. Publication : icône, version, signature, compilation.

Pour démarrer rapidement avec un accompagnement concret, la formation Flutter pour développer une application de zéro avec l’IA d’EspritAcadémique dure 2 h 30 et ne demande aucun prérequis. Elle aborde notamment :

• la présentation de Flutter, ses atouts et le site officiel ;
• l’installation du SDK, la configuration de VS Code et d’Android Studio ;
• une première application, sa structure, le Hot Reload et DartPad ;
• l’usage de l’IA directement dans VS Code pour écrire et comprendre le code ;
• le simulateur Android et l’analyse détaillée du code ;
• la préparation à la publication et la signature de l’application.

En résumé

Flutter permet de créer une application iOS et Android avec un seul code Dart, en construisant l’interface par assemblage de widgets. Installez le SDK et validez flutter doctor, apprenez les bases de Dart, maîtrisez StatelessWidget, StatefulWidget et setState(), et profitez du Hot Reload pour itérer vite. L’IA dans VS Code accélère l’écriture, à condition de comprendre ce qu’elle produit. La signature et la compilation finale ouvrent ensuite la voie à la publication sur les boutiques.