Daten per Button neu laden

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

Um aktuelle Daten zu laden, übergib dem FutureBuilder ein neues Future. Erstelle es in setState, damit der Bildschirm damit neu aufgebaut wird:

IconButton(
  icon: const Icon(Icons.refresh),
  onPressed: () {
    setState(() {
      _tip = fetch('/tip');
    });
  },
)

Der neue Tipp kommt 2 Sekunden später an. Während er geladen wird, bleibt snapshot.hasData auf true: Der Builder behält die alten Daten bei, bis sie durch neue Daten ersetzt werden. Bei einer Prüfung auf hasData bleibt der alte Tipp auf dem Bildschirm, und nichts zeigt an, dass die App gerade arbeitet.

Um den Spinner erneut anzuzeigen, frage snapshot.connectionState ab, also den aktuellen Status des Future. Er ist ConnectionState.waiting, während ein Future ausgeführt wird, und ConnectionState.done, wenn es abgeschlossen ist:

if (snapshot.connectionState == ConnectionState.waiting) {
  return const CircularProgressIndicator();
}
return Text(snapshot.data!);

Sobald es abgeschlossen ist, sind die Daten vorhanden, also ist snapshot.data! sicher.

Aufgabe

Mittel

Füge eine Aktualisierungsschaltfläche hinzu, die den nächsten Tipp lädt:

ein IconButton mit Icons.refresh in actions der oberen Leiste
beim Drücken wird _tip in setState auf ein neues fetch('/tip') gesetzt
der Ladeindikator wird angezeigt, während der neue Tipp geladen wird: Prüfe snapshot.connectionState

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: TipScreen(),
    );
  }
}

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

  @override
  State<TipScreen> createState() => _TipScreenState();
}

class _TipScreenState extends State<TipScreen> {
  late Future<String> _tip;

  @override
  void initState() {
    super.initState();
    _tip = fetch('/tip');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tip of the Day'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: FutureBuilder<String>(
              future: _tip,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    snapshot.data!,
                    textAlign: TextAlign.center,
                    style: const TextStyle(fontSize: 24),
                  );
                }
                return const CircularProgressIndicator();
              },
            ),
        ),
      ),
    );
  }
}

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