Hiển thị vòng quay khi tải

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

Hai giây là khoảng thời gian dài để nhìn chằm chằm vào một màn hình không thay đổi. Vòng tròn xoay cho người dùng biết ứng dụng đang xử lý. Trong Flutter, đó là CircularProgressIndicator.

const CircularProgressIndicator()

Nó không cần gì để hoạt động: chỉ cần đặt lên màn hình là nó sẽ xoay. Nhiệm vụ của bạn là chỉ hiển thị nó khi dữ liệu đang được tải. Một biến bool trong trạng thái của bạn sẽ làm việc đó:

bool loading = false;

// Trước await: loading = true
// Sau await: loading = false

loading ? const CircularProgressIndicator() : Text(message)

Đặt loading thành true trong setState trước khi bạn dùng await, rồi đặt lại thành false trong setState để hiển thị câu trả lời.

Thử thách

Dễ

Thay dòng chữ Loading... bằng vòng xoay tải:

thêm bool loading = false; vào trạng thái
đặt nó thành true trước khi gọi fetch và đặt lại thành false khi tin nhắn đến
khi loading là true, hiển thị CircularProgressIndicator thay cho tin nhắn

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> {
  String message = 'No message yet';

  Future<void> loadMessage() async {
    setState(() {
      message = 'Loading...';
    });
    final text = await fetch('/message');
    setState(() {
      message = text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(message, style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 24),
            ElevatedButton(onPressed: loadMessage, child: const Text('Load message')),
          ],
        ),
      ),
    );
  }
}