Muat Ulang Data dengan Tombol

Termasuk bagian Data dan Jaringan dalam perjalanan Flutter di Coddy. Pelajaran 8 dari 27.

Untuk memuat data baru, berikan future baru kepada FutureBuilder. Buat di dalam setState, agar layar dibangun ulang dengan future tersebut:

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

Petunjuk baru tiba 2 detik kemudian. Selama dimuat, snapshot.hasData tetap true: builder mempertahankan data lama sampai data baru menggantikannya. Dengan pemeriksaan hasData, petunjuk lama tetap tampil di layar dan tidak ada yang menunjukkan bahwa aplikasi sedang bekerja.

Untuk menampilkan spinner lagi, periksa snapshot.connectionState untuk mengetahui keadaan future saat ini. Nilainya adalah ConnectionState.waiting saat future berjalan dan ConnectionState.done saat future selesai:

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

Setelah selesai, datanya sudah tersedia, jadi snapshot.data! aman digunakan.

Tantangan

Sedang

Tambahkan tombol segarkan yang memuat petunjuk berikutnya:

IconButton dengan Icons.refresh di actions bilah atas
menekannya menetapkan _tip ke fetch('/tip') baru di dalam setState
spinner ditampilkan selagi petunjuk baru dimuat: periksa snapshot.connectionState

Coba sendiri

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

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Data dan Jaringan

Latihan sendiri: Compiler Flutter online