Flutter : développer des apps mobiles multiplateformes

Flutter est le framework de développement mobile multiplateforme de Google. Avec un seul code Dart, vous créez des applications natives iOS et Android (et même web et desktop) avec des performances proches du natif et une UI riche. En 2024, flutter est adopté par des millions de développeurs.

Pourquoi Flutter plutôt que React Native ?

Flutter compile directement en code natif ARM et dessine sa propre UI avec le moteur Skia/Impeller, sans pont JavaScript. Résultat : performances et rendu cohérent entre iOS et Android, même pour les animations complexes.

React Native utilise des composants natifs via un bridge, ce qui peut créer des inconsistances visuelles et des problèmes de performance sur les animations.

Installation et premier projet

# Installation Flutter SDK
flutter doctor  # Vérification de l'environnement

flutter create mon_app
cd mon_app
flutter run  # Ouvre l'émulateur ou un appareil connecté

Widgets : tout est un widget dans Flutter

flutter est entièrement basé sur les widgets. Tout est widget : texte, boutons, images, padding, colonnes, lignes.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Mon Application')),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Padding(
            padding: EdgeInsets.all(16.0),
            child: Text('Bienvenue !', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
          ),
          ElevatedButton(
            onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => const DetailPage())),
            child: const Text('Voir les détails'),
          ),
        ],
      ),
    );
  }
}

State Management avec Provider

La gestion d'état est cruciale en flutter. Provider est la solution recommandée pour les projets de taille moyenne :

class ArticleProvider extends ChangeNotifier {
  List<Article> _articles = [];
  bool _loading = false;

  List<Article> get articles => _articles;
  bool get loading => _loading;

  Future<void> fetchArticles() async {
    _loading = true;
    notifyListeners();
    _articles = await ArticleService.getAll();
    _loading = false;
    notifyListeners();
  }
}

// Dans le widget
final provider = Provider.of<ArticleProvider>(context);
if (provider.loading) return const CircularProgressIndicator();
return ListView.builder(
  itemCount: provider.articles.length,
  itemBuilder: (_, i) => ArticleCard(provider.articles[i]),
);

Appels API REST

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<List<Article>> fetchArticles() async {
  final response = await http.get(Uri.parse('https://api.monsite.fr/articles'));
  if (response.statusCode == 200) {
    final List<dynamic> data = json.decode(response.body);
    return data.map((json) => Article.fromJson(json)).toList();
  }
  throw Exception('Erreur lors du chargement');
}

Déploiement

flutter build apk --release         # Android APK
flutter build appbundle --release    # Android App Bundle (Play Store)
flutter build ios --release          # iOS (nécessite macOS + Xcode)

La documentation officielle Flutter est très complète avec des exemples interactifs sur DartPad.

Conclusion

Flutter est devenu un choix incontournable pour le développement mobile cross-platform. Sa performance native, son UI riche et cohérente, et sa productivité élevée en font une excellente option pour les projets qui ne justifient pas deux applications natives distinctes.

Flutter a mûri pour devenir un choix solide pour les applications mobiles cross-platform. Le widget tree est le cœur du framework : maîtrisez la différence entre StatelessWidget et StatefulWidget, et adoptez Riverpod ou BLoC pour la gestion d'état dans les applications d'envergure. Flutter s'étend désormais au web, desktop et aux systèmes embarqués. Les Platform Channels permettent d'appeler du code natif Kotlin ou Swift pour les fonctionnalités non couvertes par les plugins existants. Découvrez des milliers de packages sur pub.dev. La documentation Flutter est exemplaire, avec des codelabs interactifs pour chaque concept clé du framework et des recettes pratiques pour chaque cas d'usage.

Déploiement sur les stores

Le déploiement sur l'App Store et le Google Play Store nécessite une configuration de signature et des étapes de validation. Automatisez ce processus avec Fastlane ou EAS Submit (Expo Application Services) qui gèrent la signature des builds, le versioning automatique, et la soumission aux stores. Un pipeline CI/CD complet teste, build, et soumet automatiquement à chaque tag de release.

Gestion de l'état avec Riverpod

Riverpod est la solution de gestion d'état recommandée pour Flutter en 2025. Ses Provider sont des objets immuables déclarés globalement, consommés avec ConsumerWidget. Les AsyncNotifier gèrent les états asynchrones (chargement, données, erreur) de manière élégante. Contrairement à setState, Riverpod permet de partager l'état entre widgets distants dans l'arbre sans boilerplate. La génération de code avec riverpod_generator élimine encore plus de code répétitif.