L’API d’entraînement de Coddy

Fait partie de la section Données et réseau du Journey Flutter de Coddy. Leçon 4 sur 27.

La plupart des applications obtiennent leurs données d’un serveur sur Internet. Dans ces leçons, les vérifications ne peuvent pas accéder à Internet, alors le serveur se trouve à l’intérieur de votre application : lib/api.dart, l’API d’entraînement de Coddy. Ouvrez-le dans la liste des fichiers et lisez-le. Vous ne pouvez pas le modifier.

La partie que vous appelez est une fonction, fetch. Vous lui donnez un chemin, la partie d’une adresse Web qui suit le domaine, et elle vous renvoie la réponse du serveur sous forme de String, 2 secondes plus tard :

import 'api.dart';

final text = await fetch('/message');

Une véritable application fait la même chose avec le package http. Elle envoie une requête et attend le corps de la réponse, le texte renvoyé par le serveur :

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

final response = await http.get(Uri.parse('https://example.com/message'));
final text = response.body;

Le code qui l’entoure est le même : une fonction async, un await, puis setState avec le résultat. Tout ce que vous créez ici fonctionne de la même manière avec un véritable serveur.

Défi

Facile

Toucher Charger le message affiche Loading... et s’arrête là. Terminez loadMessage : récupérez le texte du chemin /message avec fetch, puis affichez-le à la place de Loading....

Essayez vous-même

import 'package:flutter/material.dart';

import 'api.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MessageScreen(),
    );
  }
}

class MessageScreen extends StatefulWidget {
  const MessageScreen({super.key});

  @override
  State<MessageScreen> createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  String message = 'No message yet';

  Future<void> loadMessage() async {
    setState(() {
      message = 'Loading...';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(message, style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 24),
            ElevatedButton(onPressed: loadMessage, child: const Text('Load message')),
          ],
        ),
      ),
    );
  }
}