Status Error FutureBuilder

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

FutureBuilder menangkap error untukmu. Saat future-nya melempar error, aplikasi tidak mengalami crash: builder dijalankan kembali dengan snapshot.hasError bernilai true, dan snapshot.error menyimpan apa yang dilempar.

Dengan begitu, setiap layar pemuatan memiliki tiga keadaan, dan builder menangani masing-masing keadaan:

if (snapshot.hasError) {
  return Text('Could not load: ${snapshot.error}');
}
if (snapshot.hasData) {
  return Text(snapshot.data!);
}
return const CircularProgressIndicator();

Error, data, dan jika tidak, masih memuat. Builder yang hanya mengetahui data akan menampilkan spinner selamanya saat pemanggilan gagal, karena tidak pernah ada data.

Letakkan setiap pemeriksaan sebelum return yang akan menyembunyikannya. Jika return spinner untuk "no data" muncul lebih dulu, baris error di bawahnya tidak akan pernah dijalankan.

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 menekan Periksa.

Tantangan

Sedang

Tanpa koneksi, layar ini terus menampilkan indikator pemuatan. Atur state error pada builder: saat snapshot.hasError, tampilkan Could not load: diikuti snapshot.error, dengan ukuran 20.

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.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