Kenali FutureBuilder

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

Sebagian besar layar memuat datanya begitu dibuka, tanpa tombol. Flutter memiliki widget untuk menampilkan future: FutureBuilder. Kamu memberikan future kepadanya, lalu widget ini membangun ulang layar setiap kali status future berubah.

FutureBuilder<String>(
  future: _message,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data!);
    }
    return const CircularProgressIndicator();
  },
)

snapshot menunjukkan keadaan future saat ini. Sebelum jawabannya tiba, snapshot.hasData bernilai false, sehingga indikator pemuatan muncul. Saat jawabannya tiba, builder dijalankan lagi dan snapshot.data berisi string tersebut.

snapshot.data memiliki tipe String?: sebuah string atau null, karena pada awalnya tidak ada data. Tanda ! setelahnya berarti "Saya sudah memeriksa, nilainya bukan null". Gunakan tanda itu hanya setelah hasData: jika nilainya null, aplikasi akan mengalami crash.

Starter sudah membuat future satu kali, di initState, yang dijalankan saat layar dibuka. late memberi tahu Dart bahwa variabel tersebut mendapat nilainya di sana, sebelum digunakan. Pelajaran berikutnya menjelaskan alasan variabel itu berada di sana.

Tantangan

Sedang

Aplikasi memuat pesan di initState, tetapi tidak pernah menampilkannya. Ganti Text pengganti dengan FutureBuilder<String> untuk _message:

CircularProgressIndicator saat pesan sedang dimuat
pesan dengan ukuran 24 saat pesan diterima

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: const Text('The message goes here', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}

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