Table des matières
Cours Flutter – Consommer une API REST ................................................................................ 2
Chapitre 1 : Introduction aux API REST et à Flutter HTTP ....................................................... 2
Objectifs ......................................................................................................................................... 2
Contenu .......................................................................................................................................... 2
Exemple.......................................................................................................................................... 2
Exercice .......................................................................................................................................... 2
Chapitre 2 : Requête GET et parsing JSON .................................................................................. 2
Objectifs ......................................................................................................................................... 2
Contenu .......................................................................................................................................... 2
Exemple.......................................................................................................................................... 3
Exercice .......................................................................................................................................... 3
Chapitre 3 : POST – Créer une ressource ...................................................................................... 3
Objectifs ......................................................................................................................................... 3
Exemple.......................................................................................................................................... 3
Exercice .......................................................................................................................................... 3
Chapitre 4 : PUT et PATCH – Mettre à jour une ressource ........................................................ 4
Objectifs ......................................................................................................................................... 4
Exemple PUT................................................................................................................................. 4
Exemple PATCH ........................................................................................................................... 4
Exercice .......................................................................................................................................... 4
Chapitre 5 : DELETE – Supprimer une ressource ........................................................................ 4
Objectifs ......................................................................................................................................... 4
Exemple.......................................................................................................................................... 4
Exercice .......................................................................................................................................... 4
Chapitre 6 : TP Guidé – TODO List avec API............................................................................... 5
Objectifs ......................................................................................................................................... 5
Étapes ............................................................................................................................................. 5
Exercice final ................................................................................................................................. 5
Chapitre 7 : Conclusion et bonnes pratiques.................................................................................. 5
Points clés....................................................................................................................................... 6
Cours Flutter – Consommer une API
REST
Chapitre 1 : Introduction aux API REST et à Flutter
HTTP
Objectifs
• Comprendre ce qu’est une API REST.
• Installer et configurer le package http.
Contenu
• Définition d’une API REST.
• Méthodes principales : GET, POST, PUT, PATCH, DELETE.
• Ajout de dépendances dans pubspec.yaml.
Exemple
dependencies:
http: ^1.2.0
Exercice
• Crée un projet Flutter nommé api_demo.
• Ajoute le package http.
• Vérifie que l’import fonctionne.
Chapitre 2 : Requête GET et parsing JSON
Objectifs
• Faire une requête GET.
• Convertir une réponse JSON en objets Dart.
Contenu
• Utilisation de http.get.
• Décodage JSON avec jsonDecode.
• Création d’une classe modèle.
Exemple
class User {
final int id;
final String name;
final String email;
User({required this.id, required this.name, required this.email});
factory User.fromJson(Map<String, dynamic> json) {
return User(
id: json['id'],
name: json['name'],
email: json['email'],
);
}
}
Exercice
• Récupère la liste des utilisateurs depuis
https://jsonplaceholder.typicode.com/users.
• Affiche-les dans un ListView.
Chapitre 3 : POST – Créer une ressource
Objectifs
• Envoyer des données à une API.
• Comprendre les en-têtes et le body.
Exemple
Future<User> createUser(String name, String email) async {
final response = await http.post(
Uri.parse('https://jsonplaceholder.typicode.com/users'),
headers: {"Content-Type": "application/json"},
body: jsonEncode({"name": name, "email": email}),
);
return User.fromJson(jsonDecode(response.body));
}
Exercice
• Crée un formulaire simple avec TextField pour ajouter un utilisateur.
• Affiche la réponse de l’API.
Chapitre 4 : PUT et PATCH – Mettre à jour une
ressource
Objectifs
• Différencier PUT (remplacement complet) et PATCH (mise à jour partielle).
Exemple PUT
Future<User> updateUser(int id, String name, String email) async {
final response = await http.put(
Uri.parse('https://jsonplaceholder.typicode.com/users/$id'),
headers: {"Content-Type": "application/json"},
body: jsonEncode({"name": name, "email": email}),
);
return User.fromJson(jsonDecode(response.body));
}
Exemple PATCH
Future<User> patchUser(int id, String email) async {
final response = await http.patch(
Uri.parse('https://jsonplaceholder.typicode.com/users/$id'),
headers: {"Content-Type": "application/json"},
body: jsonEncode({"email": email}),
);
return User.fromJson(jsonDecode(response.body));
}
Exercice
• Mets à jour l’email d’un utilisateur existant.
Chapitre 5 : DELETE – Supprimer une ressource
Objectifs
• Supprimer une ressource via une API.
Exemple
Future<void> deleteUser(int id) async {
await
http.delete(Uri.parse('https://jsonplaceholder.typicode.com/users/$id'));
}
Exercice
• Ajoute un bouton “Supprimer” dans la liste des utilisateurs.
Chapitre 6 : TP Guidé – TODO List avec API
Objectifs
• Mettre en pratique toutes les méthodes HTTP.
• Construire une mini-application complète.
Étapes
1. Classe modèle
class Todo {
final int id;
final String title;
final bool completed;
Todo({required this.id, required this.title, required this.completed});
factory Todo.fromJson(Map<String, dynamic> json) {
return Todo(
id: json['id'],
title: json['title'],
completed: json['completed'],
);
}
}
2. Service API
• fetchTodos() → GET
• addTodo() → POST
• updateTodo() → PUT/PATCH
• deleteTodo() → DELETE
3. UI
• ListView pour afficher les tâches.
• TextField + FloatingActionButton pour ajouter.
• Dismissible pour supprimer.
• Checkbox pour marquer comme terminé.
Exercice final
• Implémente une TODO List complète.
• Bonus : ajoute un filtre (toutes / terminées / en cours).
Chapitre 7 : Conclusion et bonnes pratiques
Points clés
• Toujours gérer les erreurs (try/catch).
• Utiliser FutureBuilder pour l’asynchrone.
• Séparer la logique API dans un service dédié.
• Penser à la réutilisabilité des modèles.
