Ein Spinner während des Ladens

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

Zwei Sekunden sind eine lange Zeit, um auf einen Bildschirm zu starren, der sich nicht bewegt. Ein sich drehender Kreis zeigt der Person, dass die App gerade arbeitet. In Flutter ist das CircularProgressIndicator.

const CircularProgressIndicator()

Damit er funktioniert, braucht er nichts weiter: Setze ihn auf den Bildschirm, und er dreht sich. Er soll nur angezeigt werden, während die Daten unterwegs sind. Ein bool in deinem Zustand übernimmt das:

bool loading = false;

// vor dem await: loading = true
// nach dem await: loading = false

loading ? const CircularProgressIndicator() : Text(message)

Setze loading in einem setState auf true, bevor du await verwendest, und anschließend in dem setState, das die Antwort anzeigt, wieder auf false.

Aufgabe

Einfach

Ersetze den Text Loading... durch einen Ladekreisel:

Füge bool loading = false; zum Zustand hinzu
Setze ihn vor dem fetch auf true und wieder auf false, sobald die Nachricht eintrifft
Zeige, solange loading den Wert true hat, anstelle der Nachricht einen CircularProgressIndicator 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...';
    });
    final text = await fetch('/message');
    setState(() {
      message = text;
    });
  }

  @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