Coddys Übungs-API

Teil des Abschnitts Daten und Netzwerk der Flutter-Journey von Coddy. Lektion 4 von 27.

Die meisten Apps beziehen ihre Daten von einem Server im Internet. In diesen Lektionen können die Prüfungen nicht auf das Internet zugreifen, daher befindet sich der Server in deiner App: lib/api.dart, Coddy's Übungs-API. Öffne sie in der Dateiliste und lies sie durch. Du kannst sie nicht ändern.

Der Teil, den du aufrufst, ist eine Funktion: fetch. Du übergibst ihr einen Pfad, also den Teil einer Webadresse nach der Domain, und sie liefert dir 2 Sekunden später die Antwort des Servers als String zurück:

import 'api.dart';

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

Eine echte App macht dasselbe mit dem Paket http. Sie sendet eine Anfrage und wartet auf den Body der Antwort, also den Text, den der Server zurückgesendet hat:

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

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

Der Code drumherum ist derselbe: eine async-Funktion, ein await und dann setState mit dem Ergebnis. Alles, was du hier erstellst, funktioniert genauso mit einem echten Server.

Aufgabe

Einfach

Wenn du auf Load message tippst, wird Loading... angezeigt, und dabei bleibt es. Vervollständige loadMessage: Hole den Text über den Pfad /message mit fetch ab und zeige ihn anschließend anstelle von Loading... an.

Probier es selbst

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

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Daten und Netzwerk

Übe selbstständig: Online-Flutter-Compiler