---
title: Flutter : une seule base de code pour mobile, web et desktop
source: https://synapx.fr/blog/flutter-introduction/
date: 2026-06-26
category: Application mobile
site: SynapxLab
---

# Flutter : une seule base de code pour mobile, web et desktop

**Flutter** est le framework d'interface de Google. Son pari : écrire **une seule fois** l'application, et la déployer sur **Android, iOS, web, Windows, macOS et Linux** — avec des performances natives et un rendu identique partout.

> Là où d'autres frameworks « cross-platform » s'appuient sur les composants du système (et leurs différences), Flutter **dessine lui-même** chaque pixel via son moteur de rendu. Résultat : un contrôle total de l'UI et une cohérence parfaite d'une plateforme à l'autre.

## Pourquoi Flutter ?

| Atout | En clair |
|---|---|
| 🎯 **Un seul code** | Mobile + web + desktop depuis la même base Dart |
| ⚡ **Performances natives** | Compilé en code machine (AOT), 60/120 fps |
| 🔥 **Hot reload** | Les changements s'affichent en < 1 s, sans relancer l'app |
| 🎨 **UI sur-mesure** | Tout est un *widget* : contrôle total du pixel |
| 📦 **Riche écosystème** | Des milliers de packages sur pub.dev |

## Le concept clé : tout est un widget

En Flutter, l'interface prend la forme d'un **arbre de widgets**. Un bouton, un texte, une marge, voire la structure de la page : tout est un widget, que l'on assemble de manière cohérente :

```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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Bonjour Flutter')),
        body: const Center(
          child: Text('Une seule base de code, partout.'),
        ),
      ),
    );
  }
}
```

## Stateless vs Stateful

Deux familles de widgets, à bien distinguer :

- **`StatelessWidget`** — affichage figé, qui ne change pas tout seul (un libellé, une icône).
- **`StatefulWidget`** — possède un **état** mutable et se redessine quand cet état change (un compteur, un formulaire, une animation).

Pour des états partagés entre écrans, on passe vite à une solution de **gestion d'état** : `Provider`, **`Riverpod`**, Bloc… qui évitent de faire transiter l'état à la main dans tout l'arbre.

## Le hot reload : l'argument qui change tout

Le **hot reload** injecte le code modifié dans l'application **en cours d'exécution**, en conservant l'état. Concrètement : on ajuste une couleur, un espacement ou une logique, puis le résultat apparaît **instantanément**, sans revenir à l'écran d'accueil. C'est ce qui rend le développement d'interface particulièrement fluide.

```bash
flutter run        # lance l'app, puis 'r' = hot reload, 'R' = redémarrage
```

## Construire pour la production

```bash
flutter build apk --release        # Android (APK)
flutter build appbundle --release  # Android (AAB, pour le Play Store)
flutter build ios --release        # iOS
flutter build web                  # Web
```

## Quand choisir Flutter ?

**Oui, plutôt Flutter quand :**
- vous visez **plusieurs plateformes** avec une petite équipe ;
- l'**identité visuelle** doit être identique et soignée partout ;
- vous voulez **itérer vite** sur l'UI (hot reload).

**À nuancer quand :**
- l'application doit se fondre **pixel près** dans les composants natifs de chaque OS ;
- vous dépendez fortement d'API système très spécifiques (des plugins existent, mais à vérifier).

---

> Flutter repose sur le langage **Dart** (voir l'article dédié). La combinaison des deux — un langage pensé pour l'UI et un framework qui dessine lui-même l'interface — explique pourquoi une seule personne peut livrer une application soignée sur mobile, web et desktop.