Tarik untuk Memuat Ulang

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

Di ponsel, orang menarik daftar ke bawah untuk memuat ulang. Indikator pemuatan turun dari atas, lalu data diperbarui. Widget Flutter untuk ini adalah RefreshIndicator:

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

onRefresh adalah fungsi yang mengembalikan Future. Indikator pemuatan tetap tampil sampai future tersebut selesai, jadi gunakan await untuk menunggu data baru di dalamnya:

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

Tarik untuk memuat ulang hanya berfungsi pada sesuatu yang bisa digulir. Letakkan konten di dalam ListView, meskipun hanya ada satu item: ListView selalu bisa ditarik. Indikator pemuatan sudah memberi tahu bahwa aplikasi sedang bekerja, jadi builder dapat mempertahankan petunjuk lama dengan pemeriksaan hasData.

Tantangan

Sedang

Buat tips dimuat ulang saat kamu menarik layar ke bawah:

tambahkan method refresh yang menetapkan _tip baru di dalam setState dan menunggunya
bungkus body dengan RefreshIndicator yang memiliki onRefresh: refresh
letakkan FutureBuilder di dalam ListView di dalamnya

Di pratinjau, tarik layar ke bawah dengan mouse.

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