Zum Aktualisieren nach unten ziehen

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

Auf einem Smartphone ziehen Nutzer eine Liste nach unten, um sie neu zu laden. Ein Ladesymbol erscheint von oben, und die Daten werden aktualisiert. Das Flutter-Widget dafür ist RefreshIndicator:

RefreshIndicator(
  onRefresh: refresh,
  child: ListView(
    children: [ ... ],
  ),
)

onRefresh ist eine Funktion, die ein Future zurückgibt. Das Ladesymbol beim Herunterziehen bleibt sichtbar, bis dieses Future abgeschlossen ist. Warte darin also mit await auf die neuen Daten:

Future<void> refresh() async {
  setState(() {
    _tip = fetch('/tip');
  });
  await _tip;
}

Das Herunterziehen funktioniert nur bei etwas, das scrollbar ist. Platziere den Inhalt in einer ListView, auch wenn es sich um ein einzelnes Element handelt: Eine ListView lässt sich immer nach unten ziehen. Das Ladesymbol beim Herunterziehen zeigt bereits an, dass die App arbeitet, daher kann der Builder mit einer hasData-Prüfung den alten Tipp beibehalten.

Aufgabe

Mittel

Sorge dafür, dass der Tipp neu geladen wird, wenn du den Bildschirm nach unten ziehst:

Füge eine Methode refresh hinzu, die in setState ein neues _tip setzt und darauf wartet
Umschließe den Body mit einem RefreshIndicator mit onRefresh: refresh
Füge den FutureBuilder in eine ListView darin ein

Ziehe in der Vorschau den Bildschirm mit der Maus nach unten.

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