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

> Créez votre première application mobile avec Flutter : installation du SDK, bases de Dart, widgets, Hot Reload, émulateur Android, IA et signature.

- URL : https://guides-numeriques.fr/developpement/flutter-application-mobile/
- Thématique : Développement web & mobile
- Mis à jour : 2026-09-26
- Formation associée : [Apprendre Flutter : Développer une application de zéro (IA)](https://espritacademique.com/formations/apprendre-flutter-developper-une-application-de-zero-ia/)

## L'essentiel

- Flutter est un framework open source de Google qui permet de créer des applications iOS, Android, web et desktop à partir d'un seul code source.
- Les applications Flutter s'écrivent en Dart, un langage typé dont la syntaxe est proche de JavaScript, Java ou C#.
- Dans Flutter, tout est widget : l'interface est un arbre de widgets imbriqués, sans ou avec état (StatelessWidget, StatefulWidget).
- Le Hot Reload applique une modification du code à l'application en cours d'exécution en une fraction de seconde, sans perdre l'état de l'écran.
- La commande flutter doctor vérifie l'installation ; la publication sur les boutiques exige une application signée et, pour iOS, un Mac avec Xcode.

**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](https://guides-numeriques.fr/automatisation/power-apps/) peut suffire ; pour un jeu, un moteur spécialisé comme [Godot](https://guides-numeriques.fr/developpement/godot-jeu-video/) sera plus adapté.

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


**Schéma — Créer une application Flutter en 6 étapes**

1. **Installer le SDK** : SDK Flutter avec Dart, vérifié par flutter doctor
2. **Créer le projet** : Flutter: New Project ou flutter create mon_app
3. **Explorer la structure** : lib/main.dart, pubspec.yaml, dossiers natifs
4. **Apprendre Dart** : Variables, fonctions, classes, testées sur DartPad
5. **Construire les widgets** : Arbre de widgets, StatefulWidget et setState()
6. **Tester en Hot Reload** : Émulateur Android, touches r et R


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

Rendez-vous sur le site officiel [flutter.dev](https://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 :

```bash
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 :

```bash
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 :

```bash
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.

```dart
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 :

```dart
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.

> **Formation recommandée** : [Apprendre Flutter : Développer une application de zéro (IA)](https://espritacademique.com/formations/apprendre-flutter-developper-une-application-de-zero-ia/) — 2h30 de vidéo, 59 €.

## 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é :

```dart
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](https://guides-numeriques.fr/ia/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 :

```bash
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 :

```bash
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](https://guides-numeriques.fr/developpement/git-github/) 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](https://guides-numeriques.fr/developpement/apprendre-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.


**Schéma — Flutter, React Native ou développement natif ?**

| Flutter | React Native | Natif (Kotlin / Swift) |
|---|---|---|
| Langage Dart | JavaScript ou TypeScript | Un langage par plateforme |
| Code partagé presque entièrement | Code partagé en grande partie | Deux applications distinctes |
| Moteur de rendu propre | Composants natifs du système | Besoins très spécifiques |


## 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](https://espritacademique.com/formations/apprendre-flutter-developper-une-application-de-zero-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.

## Sources et documentation officielle

- [Flutter documentation (Flutter)](https://docs.flutter.dev/)
- [Install Flutter (Flutter)](https://docs.flutter.dev/install)
- [Building user interfaces with Flutter (Flutter)](https://docs.flutter.dev/ui)
- [Introduction to Dart (Dart)](https://dart.dev/language)

## Questions fréquentes

### Faut-il savoir programmer pour apprendre Flutter ?

Non, mais il faut accepter d'apprendre les bases de la programmation en même temps : variables, conditions, fonctions, classes. Dart est un langage lisible, et Flutter permet de voir immédiatement le résultat de chaque ligne grâce au Hot Reload, ce qui aide beaucoup les débutants. Un assistant IA dans l'éditeur peut aussi expliquer le code ligne par ligne.

### Peut-on créer une application iOS avec Flutter sur Windows ?

Vous pouvez écrire et tester le code sur Windows avec un émulateur Android, et le même code fonctionnera sur iOS. En revanche, compiler, tester sur simulateur iOS et publier sur l'App Store nécessite un Mac avec Xcode, ou un service de compilation dans le cloud. C'est une contrainte imposée par Apple, pas par Flutter.

### Quelle différence entre Flutter et React Native ?

Les deux permettent de créer des applications multiplateformes. Flutter utilise le langage Dart et dessine lui-même ses composants graphiques, ce qui garantit un rendu identique sur tous les appareils. React Native utilise JavaScript ou TypeScript et s'appuie sur les composants natifs de chaque système. Le choix dépend surtout des langages déjà maîtrisés par l'équipe.

### Combien de temps faut-il pour apprendre Flutter ?

Quelques heures suffisent pour installer l'environnement, comprendre la structure d'un projet et modifier une première application. Comptez quelques semaines de pratique régulière pour construire seul une application de plusieurs écrans avec navigation, formulaires et appels à une API. La maîtrise de la gestion d'état et de la publication vient ensuite avec les projets.

### Flutter est-il gratuit ?

Oui. Flutter et Dart sont open source et gratuits, tout comme Visual Studio Code et Android Studio. Les seuls coûts éventuels concernent la publication : un compte développeur Google Play et un abonnement au programme développeur Apple sont nécessaires pour diffuser une application sur les boutiques. Consultez leurs pages officielles pour les conditions actuelles.

### Peut-on utiliser l'IA pour coder une application Flutter ?

Oui. Des assistants comme GitHub Copilot s'intègrent à Visual Studio Code pour compléter le code, générer un widget à partir d'une description ou expliquer une erreur. Ils font gagner beaucoup de temps, à condition de relire et de comprendre le code proposé. Sans bases en Dart et en structure Flutter, il devient vite impossible de corriger ce que l'IA a produit.