Tombol Coba Lagi

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

Koneksi kembali. Layar error yang baik tidak membiarkan orang terjebak: layar itu menjelaskan apa yang terjadi dan menawarkan cara untuk mencoba lagi.

Mencoba lagi berarti memuat ulang: buat future baru di setState, sama seperti tombol muat ulang.

void tryAgain() {
  setState(() {
    _message = fetch('/message');
  });
}

Ada satu detail. Selagi future baru berjalan, snapshot tetap menyimpan error terakhir, seperti snapshot menyimpan data lama: hasError tetap true sampai jawaban baru tiba. Untuk menampilkan spinner saat percobaan kedua, periksa snapshot.connectionState terlebih dahulu:

if (snapshot.connectionState == ConnectionState.waiting) {
  return const CircularProgressIndicator();
}
if (snapshot.hasError) {
  // error dan tombolnya
}
return Text(snapshot.data!);

Untuk melihatnya gagal di pratinjau, tulis offline = true; sebagai baris pertama main lalu tekan Jalankan. offline berasal dari api.dart: ini membuat setiap pemanggilan gagal seolah-olah ponsel tidak mendapat sinyal. Hapus baris itu sebelum kamu menekan Periksa.

Tantangan

Sedang

Beri state error jalan keluar:

di bawah teks error, tambahkan tombol Coba lagi
menekannya akan menetapkan fetch('/message') baru di dalam setState
spinner ditampilkan saat mencoba lagi: periksa ConnectionState.waiting terlebih dahulu di dalam builder

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

class MessageScreen extends StatefulWidget {
  const MessageScreen({super.key});

  @override
  State<MessageScreen> createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  late Future<String> _message;

  @override
  void initState() {
    super.initState();
    _message = fetch('/message');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FutureBuilder<String>(
          future: _message,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text(
                'Could not load: ${snapshot.error}',
                style: const TextStyle(fontSize: 20),
              );
            }
            if (snapshot.hasData) {
              return Text(snapshot.data!, 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