Chapitre 11 : Consommation de l’API Laravel via Flutter

C’est ici que l’écosystème web (Laravel API) et l’écosystème de l’application mobile native générée (Flutter) se rencontrent pour échanger la Data en temps réel via des flux JSON.

I. Émission des Requêtes Asynchrones en Dart

Au niveau Client, Flutter (avec le compilateur Dart) doit émettre la fameuse requête.

Le développement sur mobile impose une règle fondamentale du Client / Serveur : le composant de connexion au réseau qui “télécharge la réponse” exige un temps technique de réalisation qui serait bloquant pour l’App : le Serveur (Laravel) a une lenteur de réseau physique à affronter vis-à-vis du terminal : Une demande met souvent parfois 1.32 seconde à revenir à la tablette, ce qui pétrifierait et ferait planter une application si cette dernière devait attendre stoïquement l’écran figé.

Pour contrer cette latence vitale du réseau (et laisser le terminal dessiner fièrement ses animations d’attente “spinner loader”), Dart gère toutes ses requêtes backend par des promesses Asynchrones via Future.

// Ajout du pacquage 'http' de Flutter officiel dans le 'pubspec.yaml'
import 'package:http/http.dart' as http;
import 'dart:convert';

// Fetch asynchrone pour la base de données
Future<List<dynamic>> recupereListeUtilisateursAPI() async {

  // Envoi de la requête au Controller Laravel de l'exemple du Chap.10
  final response = await http.get(Uri.parse('https://api.monsite.com/api/users/liste'));

  if (response.statusCode == 200) {
    // Succès 200 => Décode le retour 'json' convertit le texte vers un objet Map
    final responseBody = json.decode(response.body);
    return responseBody['data'];
  } else {
    throw Exception('Erreur Fatale 500 : API Indisponible.');
  }
}

Le pacquage OpenSource Dio est aussi immensément réputé en 2026 pour ce procédé.

II. Modélisation Conceptuelle Client (PODOs)

Une liste dynamic brute n’est jamais laissée telle quelle dans une application robuste d’industrie logicielle Flutter (risque élevé d’exception Null Point). Le Backend Laravel est souvent soumis aux règles de Modèles Eloquents pour l’enregistrement des Données SQL. L’API va de l’autre coté fournir le mapping JSON du modèle que le programmeur Front-end traduira avec précision via PODO (Plain Old Dart Objects) : C’est la Traduction/L’Adaptation formelle de ce JSON.

class UserModel {
  final int id;
  final String identite; // Correspond parfaitement à notre Laravel Resource !

  UserModel({required this.id, required this.identite});

  // Factory Builder: Transforme l'infâme map décodée json du backend Laravel vers l'objet Typé et prévisible UserModel FrontEnd Mobile de l'App.
  factory UserModel.fromJson(Map<String, dynamic> jsonFormat) {
    return UserModel(
      id: jsonFormat['id_global'],
      identite: jsonFormat['identite'],
    );
  }
}

III. Le FutureBuilder() (Dessiner avec la donnée backend)

La dernière étape sublime consiste à accrocher la vue au processus. Flutter implémente la magie du composant graphique Widget : FutureBuilder.

Le FutureBuilder accepte l’objet appel API et dessine un indicateur Loading circulaire si “la donnée n’est pas encore arrivée (carré 1, sec 00:01)”, et change subitement le Widget d’écran d’un coup (et tout seul !) vers La liste du contenu (Carré 2, sec 00:03) aussitôt que le statut Laravel Backend HTTP 200 est signalé.

// Utilisation ultra classique d'un Widget surchargé
class EcranUtilisateur extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<UserModel>>(
      // On attache la grande fonction Asynchrone ici
      future: fetchUsersPODO(), // Version adaptée PODO de l'étape API I
      builder: (context, snapshot) {

        // Etat n°1: Connexion en cours, "spinner" magique qui tourne
        if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
        }

        // Etat n°2 : Crash Network ? L'API renvoi 404/500 Code Error HTTP ? Message d'alerte rouge affiché avec le texte de l’erreur
        else if (snapshot.hasError) {
            return Text('Erreur: ${snapshot.error}');
        }

        // Etat n°3: L'utilisateur a été rapatrié du réseau mondial ! Parfait !
        else {
            final utilisateursFinaux = snapshot.data!;
            // Rendu en simple liste Scrollable Native de la Data Laravel sur l'iPhone / L'Oppo du spectateur
            return ListView.builder(
              itemCount: utilisateursFinaux.length,
              itemBuilder: (context, index) {
                   return ListTile(title: Text(utilisateursFinaux[index].identite));
              },
            );
        }
      },
    );
  }
}