Coddy 的练习 API

本课属于 Coddy Flutter 学习旅程的“数据与网络”单元。第 4 课，共 27 课。

大多数应用都会从互联网上的服务器获取数据。在这些课中，检查功能无法连接互联网，所以服务器就在你的应用里：lib/api.dart，Coddy 的练习 API。请在文件列表中打开它并阅读。你不能修改它。

你调用的部分是一个函数：fetch。你给它一个路径，也就是网址中域名后面的部分，它会在 2 秒后返回服务器的答复：

import 'api.dart';

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

真实的应用也会通过 http 库做同样的事。它发送请求，并等待答复的主体，也就是服务器发回的文本：

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

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

周围的代码是一样的：一个 async 函数、一个 await，然后用结果调用 setState。你在这里编写的所有内容，用于真实服务器时也会以同样的方式工作。

挑战

简单

点击Load message后会显示Loading...，然后就停在那里。完成loadMessage：使用fetch从路径/message获取文本，然后用获取的文本替换Loading...。

亲手试试

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

自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

自己练习： Flutter 在线编译器

Coddy 的练习 API

数据与网络中的所有课