🛢️Parcours Fioul GroupéFlutter · Chapitre 13
Accueil › Flutter › Chapitre 13
Chapitre 13 / 19

Utilisation du protocole HTTP

Le chapitre qui relie l'appli à l'API Spring : appeler des endpoints REST, encoder/décoder le JSON, et afficher le résultat avec FutureBuilder.

1 Étape

Le paquet http

On ajoute http à pubspec.yaml. On centralise les appels dans une classe service (miroir du contrôleur Spring).

dependencies:
  http: ^1.2.0
Émulateur Android — l'API locale se joint via http://10.0.2.2:8080 (pas localhost).
2 Étape

Un GET et le décodage JSON

jsonDecode transforme la réponse en structures Dart, qu'on mappe vers nos modèles.

Future<List<Campagne>> getOuvertes({String? zone}) async {
  final url = Uri.parse('$_base/campagnes')
      .replace(queryParameters: zone != null ? {'zone': zone} : null);
  final r = await http.get(url);
  if (r.statusCode != 200) throw Exception('Erreur ${r.statusCode}');
  final List data = jsonDecode(r.body);
  return data.map((j) => Campagne.fromJson(j)).toList();
}
3 Étape

Un POST (rejoindre)

On envoie un corps JSON avec le bon en-tête Content-Type.

Future<void> rejoindre(String id, Commande c) async {
  await http.post(
    Uri.parse('$_base/campagnes/$id/commandes'),
    headers: {'Content-Type': 'application/json'},
    body: jsonEncode(c.toJson()),
  );
}
4 Notion

Afficher avec FutureBuilder

FutureBuilder gère les trois états d'un appel : en cours, erreur, données.

FutureBuilder<List<Campagne>>(
  future: service.getOuvertes(),
  builder: (ctx, snap) {
    if (snap.connectionState != ConnectionState.done)
      return const Center(child: CircularProgressIndicator());
    if (snap.hasError) return Text('Erreur : ${snap.error}');
    return /* ListView.builder sur snap.data! */;
  },
)
🛢️ Sur le projet Fioul Groupé

Écris CampagneService (getOuvertes, getDetail, rejoindre) pointant vers ton API Spring déployée, et affiche la liste avec FutureBuilder + ListView.builder. L'appli consomme désormais les vraies données du projet.

À retenir
  • Paquet http ; 10.0.2.2 sur l'émulateur.
  • jsonDecode/jsonEncode + fromJson/toJson.
  • FutureBuilder gère chargement / erreur / données.
← Chapitre 12