Ćwiczeniowe API Coddy'ego

Część sekcji Dane i sieć ścieżki Flutter w Coddy. Lekcja 4 z 27.

Większość aplikacji pobiera dane z serwera w internecie. W tych lekcjach testy nie mogą połączyć się z internetem, więc serwer znajduje się wewnątrz Twojej aplikacji: lib/api.dart, testowe API Coddy’ego. Otwórz ten plik na liście plików i przeczytaj go. Nie możesz go zmienić.

Wywołujesz jedną funkcję: fetch. Podajesz jej ścieżkę, czyli część adresu internetowego następującą po domenie, a 2 sekundy później otrzymujesz odpowiedź serwera jako String:

import 'api.dart';

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

Prawdziwa aplikacja robi to samo za pomocą pakietu http. Wysyła żądanie i czeka na treść odpowiedzi, czyli tekst odesłany przez serwer:

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

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

Kod wokół tego działa tak samo: funkcja async, await, a następnie setState z wynikiem. Wszystko, co tutaj zbudujesz, będzie działać tak samo w połączeniu z prawdziwym serwerem.

Wyzwanie

Łatwy

Dotknięcie przycisku Load message wyświetla Loading... i na tym się kończy. Dokończ funkcję loadMessage: pobierz tekst ze ścieżki /message za pomocą fetch, a następnie wyświetl go zamiast Loading....

Spróbuj swoich sił

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')),
          ],
        ),
      ),
    );
  }
}