API luyện tập của Coddy

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

Hầu hết ứng dụng lấy dữ liệu từ máy chủ trên internet. Trong các bài học này, các bước kiểm tra không thể kết nối internet, vì vậy máy chủ nằm bên trong ứng dụng của bạn: lib/api.dart, API luyện tập của Coddy. Mở tệp này trong danh sách tệp và đọc nội dung. Bạn không thể thay đổi tệp này.

Phần bạn gọi là một hàm (function), fetch. Bạn truyền vào hàm này một đường dẫn, phần của địa chỉ web nằm sau tên miền, rồi 2 giây sau, hàm trả về câu trả lời của máy chủ dưới dạng String:

import 'api.dart';

final text = await fetch('/message');

Ứng dụng thực tế cũng làm tương tự với package http. Ứng dụng gửi một yêu cầu rồi chờ phần nội dung, tức văn bản máy chủ gửi lại:

import 'package:http/http.dart' as http;

final response = await http.get(Uri.parse('https://example.com/message'));
final text = response.body;

Phần code xung quanh cũng giống nhau: một hàm async, một await, rồi gọi setState với kết quả. Mọi thứ bạn tạo ở đây đều hoạt động theo cách tương tự khi kết nối với máy chủ thực tế.

Thử thách

Dễ

Nhấn Tải thông báo sẽ hiển thị Loading... rồi dừng lại. Hoàn thiện loadMessage: lấy văn bản từ đường dẫn /message bằng fetch, rồi hiển thị văn bản đó thay cho Loading....

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...';
    });
  }

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