Formation Flutter : Guide Complet Dart pour Apps iOS Android

Introduction à Flutter et Dart

Qu'est-ce que Flutter ?

Flutter est un framework open-source développé par Google, permettant de créer des applications multiplateformes. Avec Flutter, il est possible de développer des applications pour iOS, Android, web et desktop à partir d'une même base de code. Flutter utilise un moteur de rendu graphique performant, garantissant une expérience utilisateur fluide et réactive.

Le langage qui accompagne Flutter est Dart, conçu pour être simple et efficace. Dart facilite la gestion des états, la programmation asynchrone et la création de widgets réutilisables, ce qui est essentiel pour les applications mobiles modernes.

• Développement multiplateforme
• Moteur de rendu performant
• Langage Dart moderne
• Interface utilisateur réactive
• Communauté active et en croissance

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello Flutter')),
        body: Center(child: Text('Bienvenue sur Flutter!')),
      ),
    );
  }
}

Ce code crée une application de base affichant un texte dans l'interface.

Installation de l'environnement de développement

Pré-requis

Avant d'installer Flutter, assurez-vous que votre système répond aux exigences minimales : macOS, Linux ou Windows. Installez Git pour gérer le SDK Flutter. Pour le développement mobile, Android Studio ou Xcode (pour iOS) sont recommandés pour la création d'émulateurs et le débogage.

Téléchargez le SDK Flutter depuis le dépôt officiel et suivez les instructions d'installation. Après l'installation, exécutez flutter doctor pour vérifier les dépendances requises et corriger les éléments manquants.

• Système d'exploitation : macOS, Linux ou Windows
• Installation de Git
• Android Studio ou Xcode
• Télécharger le SDK Flutter
• Exécuter flutter doctor et corriger les éléments signalés

Pour cloner le dépôt Flutter (branche stable) et ajouter le SDK au PATH temporairement :

git clone https://github.com/flutter/flutter.git -b stable
export PATH="$PATH:`pwd`/flutter/bin"

Cela téléchargera la version stable du SDK Flutter sur votre machine.

Les bases du langage Dart

Syntaxe et concepts

Dart est un langage orienté objet avec une syntaxe proche de Java et JavaScript. Les concepts clés sont les classes, objets et fonctions. Dart supporte l'async-await pour la gestion des opérations asynchrones, indispensable dans les apps réseau ou I/O intensives.

Les types en Dart sont statiques et permettent d'attraper des erreurs à la compilation. Utilisez var, final ou const selon le besoin de mutabilité.

• Orienté objet
• Syntaxe similaire à Java/JavaScript
• Gestion asynchrone avec async-await
• Types de données statiques
• Déclaration de variables : var, final, const

void main() {
  var name = 'Flutter';
  final version = 2.0;
  print('Bienvenue à $name version $version');
}

Nouveautés et statut (Dart 3)

Dart 3 est désormais le standard pour les nouveaux projets Flutter. Ses apports principaux :

• Records : structures légères pour retourner plusieurs valeurs de façon sécurisée.
• Pattern matching : tests et déstructurations plus expressifs et lisibles.
• Null safety consolidée : garanties à la compilation contre les null exceptions.

Si vous maintenez un projet ancien (Dart 2.x), suivez le guide officiel de migration et vérifiez la compatibilité des dépendances avant d'effectuer la mise à niveau. Pour tout nouveau projet, commencez directement avec Dart 3.

Architecture : Widget Tree

Le 'Widget Tree' est le concept central pour comprendre la hiérarchie et le rendu d'une interface Flutter. Visualiser cet arbre aide à organiser la logique, la séparation des responsabilités et la stratégie de mise à jour des widgets.

Comprendre ce schéma vous aidera à décider où placer la logique d'état et comment optimiser les reconstructions.

Création de votre première application Flutter

Débuter avec Flutter

Si votre environnement est prêt (voir la section d'installation), la création d'un nouveau projet Flutter se fait en quelques secondes. La commande flutter create génère la structure du projet et les fichiers de configuration pour iOS et Android.

Après la création, personnalisez les widgets et structurez votre application en suivant le motif widget-tree. Utilisez Scaffold, AppBar et des widgets de mise en page comme Column et Row pour composer votre UI.

• Création d'un nouveau projet avec flutter create
• Structure du projet et dossiers importants
• Utilisation de widgets de base comme Scaffold
• Organisation du code et séparation des responsabilités

flutter create my_first_app

La commande ci-dessus génère un projet Flutter prêt à être modifié.

Fonctionnalités avancées de Flutter

Utilisation des widgets personnalisés

Après avoir monté l'application de base, créez des widgets personnalisés pour réutiliser l'UI et normaliser l'apparence. Les widgets Stateless et Stateful permettent de contrôler la recomposition et la gestion locale de l'état.

Les animations et transitions enrichissent l'expérience utilisateur. Flutter propose des APIs (AnimationController, Tween, Hero, implicit animations) et des packages tiers pour des animations complexes.

• Création de widgets personnalisés
• Réutilisation du code
• Intégration d'animations pour une meilleure UX
• Utilisation des bibliothèques d'animation de Flutter

class CustomCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4.0,
      margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
      child: Padding(
        padding: EdgeInsets.all(12.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Titre du produit', style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold)),
            SizedBox(height: 8.0),
            Text('Description courte du produit.'),
          ],
        ),
      ),
    );
  }
}

Ce widget peut être utilisé pour afficher un produit dans votre application.

Débogage avec Flutter DevTools

Flutter DevTools est un ensemble d'outils de débogage visuel et de profiling accessible depuis votre IDE (Android Studio, VS Code) ou via flutter pub global run devtools. Il inclut :

• Inspector : inspection du widget tree et mise en évidence des widgets reconstruits.
• Performance : timeline des frames, CPU & memory profiling.
• Network : suivi des requêtes réseau (utile avec dio ou http).
• Logging : visualisation des logs et erreurs d'exécution.

Exemples d'utilisation :

• Lancer DevTools depuis VS Code : palette → Flutter: Open DevTools.
• Inspecter un widget problématique : sélectionnez-le dans l'Inspector pour voir ses propriétés et son arbre de parents/enfants.
• Utiliser le profiling pour identifier les janks et adapter la logique (déplacer du travail hors de la main UI, utiliser compute pour le traitement intensif).

Conseils pratiques : activez le mode profile sur un appareil réel pour mesurer les performances réelles (ex : flutter run --profile), et utilisez l'Inspector pour repérer les rebuilds inutiles.

Comparaison gestion d'état (Provider / Riverpod / BLoC)

Le choix d'une solution de gestion d'état dépend de la taille du projet, de l'équipe et des préférences en matière de testabilité et de maintenabilité. Voici une comparaison concise des approches courantes :

• Provider (library: provider, 6.x) — Simple à prendre en main, s'intègre naturellement avec les patterns Flutter classiques. Idéal pour les petites et moyennes applications. Usage fréquent avec ChangeNotifier pour la simplicité. Avantages : faible courbe d'apprentissage, peu de boilerplate. Limites : moins structuré sur les très grandes bases de code.
• Riverpod (library: flutter_riverpod, 2.x) — Conçu pour résoudre certaines limites de Provider (meilleure testabilité, providers indépendants du contexte). Riverpod favorise l'immutabilité et la composition des providers. Avantages : forte isolation, facile à tester, bon support pour l'architecture modulaire. Limites : léger apprentissage si l'on vient de Provider.
• BLoC (library: flutter_bloc, 8.x) — Basé sur un pattern flux/événements avec séparation claire entre events, states et logique métier. Excellent pour les grandes applications nécessitant une architecture prévisible et fortement testable. Avantages : structure robuste, facilité de tests unitaires. Limites : plus de boilerplate et une courbe d'apprentissage plus élevée.

Quand choisir quoi ?

• Projet simple ou prototype → Provider.
• Projet moyen à grand, besoin de testabilité et modularité → Riverpod.
• Application complexe avec logique métier lourde et équipes larges → BLoC.

Exemples rapides (dépendances)

Extrait de pubspec.yaml (dépendances typiques) :

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0
  flutter_riverpod: ^2.0.0
  flutter_bloc: ^8.0.0

Conseils pratiques

• Privilégiez l'approche la plus simple qui répond aux besoins actuels ; vous pourrez migrer vers une solution plus robuste si nécessaire.
• Favorisez l'architecture testable : mocks, providers indépendants et separation of concerns facilitent la maintenance.
• Documentez le pattern choisi et fournissez des exemples au sein du projet pour harmoniser les contributions de l'équipe.
• Surveillez la taille des rebuilds : utilisez const et des sélecteurs (Selector, ref.watch/Consumer) pour limiter les reconstructions.

Déploiement sur iOS et Android

Préparation de l'environnement

Pour déployer une application Flutter sur iOS et Android, la préparation de l'environnement est cruciale. Pour Android, installez Android Studio (SDK, émulateurs). Pour iOS, utilisez un Mac avec Xcode pour gérer les builds et déploiements. Exécutez flutter doctor pour vérifier la configuration globale.

• Installer Flutter SDK et ajouter au PATH
• Installer Android Studio (SDK, émulateurs) pour Android
• Installer Xcode (pour iOS) — nécessite un Mac
• Configurer les variables d'environnement et signer les builds (keystore pour Android, provisioning profiles pour iOS)

Création et configuration du projet / fichiers importants

Après génération du projet (flutter create dans la section précédente), récupérez les dépendances et vérifiez les fichiers de configuration :

• Exécuter flutter pub get pour récupérer les dépendances.
• iOS : modifier ios/Runner/Info.plist pour ajouter les permissions (ex: NSCameraUsageDescription) et configurer l'identité de l'app dans Xcode.
• Android : vérifier android/app/src/main/AndroidManifest.xml pour les permissions et android/app/build.gradle pour les versions du SDK (compileSdkVersion, targetSdkVersion).
• Signer les builds : générer et configurer un keystore (Android) et configurer les certificats et provisioning profiles (iOS).

Commandes utiles pour les builds de production

Exemples de commandes de build en release :

# Android : créer un APK optimisé par ABI
flutter build apk --split-per-abi

# Android : créer un App Bundle (Google Play)
flutter build appbundle

# iOS : créer un IPA (nécessite Xcode/macOS)
flutter build ipa

Utilisez --split-per-abi pour réduire la taille d'installation par architecture et flutter build appbundle pour publier sur Google Play. Pour iOS, utilisez Xcode Organizer pour envoyer l'IPA si besoin.

Bonnes pratiques de déploiement

• Testez sur appareils réels et en mode --profile pour mesurer les performances réelles.
• Automatisez la signature et la publication via CI/CD (ex. GitHub Actions, GitLab CI) pour garantir des builds reproductibles.
• Maintenez des versions sémantiques et mettez à jour les dépendances après tests approfondis.