Làm quen với FutureBuilder

Thuộc phần Dữ liệu và mạng trong hành trình Flutter của Coddy. Bài học 6 trên 27.

Hầu hết màn hình tải dữ liệu ngay khi mở, không cần nút bấm. Flutter có một widget để hiển thị một tác vụ trong tương lai: FutureBuilder. Bạn đưa tác vụ trong tương lai cho widget này, rồi nó dựng lại màn hình mỗi khi trạng thái của tác vụ thay đổi.

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

snapshot cho biết tác vụ trong tương lai đang ở trạng thái nào. Trước khi kết quả đến, snapshot.hasData là false, nên vòng tròn tải sẽ hiển thị. Khi kết quả đến, hàm dựng chạy lại và snapshot.data chứa chuỗi đó.

snapshot.data có kiểu String?: một chuỗi hoặc null, vì ban đầu chưa có dữ liệu. Dấu ! phía sau cho biết "Mình đã kiểm tra, giá trị này không phải null". Chỉ dùng dấu này sau hasData: nếu giá trị là null, ứng dụng sẽ gặp lỗi.

Mã khởi đầu đã tạo tác vụ trong tương lai một lần trong initState, hàm này chạy khi màn hình mở. late cho Dart biết biến sẽ nhận giá trị ở đó, trước khi được sử dụng. Bài học tiếp theo sẽ giải thích vì sao biến được khai báo ở đó.

Thử thách

Trung bình

Ứng dụng tải thông điệp trong initState nhưng không bao giờ hiển thị thông điệp đó. Thay Text giữ chỗ bằng FutureBuilder<String> cho _message:

hiển thị CircularProgressIndicator trong khi tải
hiển thị thông điệp với cỡ chữ 24 khi tải xong

Tự làm thử

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