Wczytaj dane ponownie przyciskiem

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

Aby wczytać świeże dane, przekaż nowy future do FutureBuilder. Utwórz go w setState, aby ekran został ponownie zbudowany z jego użyciem:

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

Nowa podpowiedź pojawi się 2 sekundy później. Podczas wczytywania snapshot.hasData pozostaje true: builder zachowuje stare dane, aż zastąpią je nowe. Przy sprawdzaniu hasData stara podpowiedź pozostaje na ekranie i nic nie wskazuje, że aplikacja pracuje.

Aby ponownie wyświetlić wskaźnik ładowania, sprawdź snapshot.connectionState, czyli aktualny stan future. Ma on wartość ConnectionState.waiting, gdy future jest wykonywany, oraz ConnectionState.done, gdy jego wykonywanie się zakończy:

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

Gdy wykonywanie się zakończy, dane są dostępne, więc snapshot.data! jest bezpieczne.

Wyzwanie

Średni

Dodaj przycisk odświeżania, który wczytuje następną wskazówkę:

IconButton z Icons.refresh w actions górnego paska
naciśnięcie go ustawia _tip na nowe fetch('/tip') w setState
wskaźnik ładowania jest wyświetlany podczas wczytywania nowej wskazówki: sprawdź snapshot.connectionState

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