Pociągnij, aby odświeżyć

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

Na telefonie użytkownicy przeciągają listę w dół, aby ją odświeżyć. U góry pojawia się wskaźnik ładowania, a dane są aktualizowane. Widget Fluttera, który to umożliwia, to RefreshIndicator:

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

onRefresh to funkcja, która zwraca wartość typu Future. Wskaźnik ładowania pozostaje widoczny, dopóki ta przyszła wartość nie zostanie obliczona, więc użyj await dla nowych danych wewnątrz tej funkcji:

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

Przeciąganie działa tylko na elemencie, który można przewijać. Umieść zawartość w ListView, nawet jeśli zawiera tylko jeden element: ListView zawsze można przeciągnąć. Wskaźnik ładowania informuje już, że aplikacja pracuje, więc builder może zachować poprzednią podpowiedź, używając warunku hasData.

Wyzwanie

Średni

Spraw, aby wskazówka odświeżała się po przeciągnięciu ekranu w dół:

dodaj metodę refresh, która ustawia nową wartość _tip w setState i czeka na jej zakończenie
otocz treść elementem RefreshIndicator z onRefresh: refresh
umieść FutureBuilder w elemencie ListView wewnątrz niego

W podglądzie przeciągnij ekran w dół za pomocą myszy.

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