Bir Düğmeyle Verileri Yeniden Yükleme

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

Yeni verileri yüklemek için FutureBuilder'a yeni bir future ver. Ekranın bununla yeniden oluşturulması için bunu setState içinde yap:

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

Yeni ipucu 2 saniye sonra gelir. Yüklenirken snapshot.hasData değeri true kalır: oluşturucu, yeni veriler eskilerin yerini alana kadar eski verileri tutar. hasData denetimiyle eski ipucu ekranda kalır ve uygulamanın çalıştığını gösteren hiçbir şey görünmez.

Döndürücüyü yeniden göstermek için geleceğin şu anki durumunu veren snapshot.connectionState değerini denetle. Bir future çalışırken ConnectionState.waiting, tamamlandığında ise ConnectionState.done olur:

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

Tamamlandığında veriler hazırdır, bu yüzden snapshot.data! güvenlidir.

Görev

Orta

Sonraki ipucunu yükleyen bir yenileme düğmesi ekle:

üst çubuğun actions bölümünde Icons.refresh içeren bir IconButton
düğmeye basıldığında, setState içinde _tip yeni bir fetch('/tip') değeri alır
yeni ipucu yüklenirken dönen simge gösterilir: snapshot.connectionState değerini kontrol et

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