Yenilemek için Aşağı Çekme

Coddy'nin Flutter Journey'sinin Veri ve Ağ bölümünün bir parçası. Ders 9 / 27.

Telefonda insanlar bir listeyi yeniden yüklemek için aşağı doğru çeker. Üstten bir döndürücü belirir ve veriler güncellenir. Flutter'daki bunun için kullanılan bileşen RefreshIndicator öğesidir:

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

onRefresh, Future döndüren bir işlevdir. Bu gelecek tamamlanana kadar çekme döndürücüsü görünür kalır; bu yüzden yeni veriyi içinde await ile bekleyin:

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

Çekme işlemi yalnızca kaydırılabilen bir öğede çalışır. İçerik tek bir öğeden oluşsa bile onu bir ListView içine koyun: Bir ListView her zaman aşağı doğru çekilebilir. Çekme döndürücüsü uygulamanın çalıştığını zaten gösterir, bu yüzden oluşturucu hasData denetimiyle eski ipucunu koruyabilir.

Görev

Orta

Ekranı aşağı çektiğinde ipucunun yeniden yüklenmesini sağla:

yeni bir _tip ayarlayan ve onu bekleyen bir refresh yöntemi ekle; bunu setState içinde yap
gövdeyi, onRefresh: refresh içeren bir RefreshIndicator ile sar
FutureBuilder bileşenini bunun içine bir ListView olarak yerleştir

Önizlemede ekranı fareyle aşağı doğru sürükle.

Kendin dene

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