前言
恭喜你完成了 Birdle 猜词游戏的全部教程！从环境搭建到隐式动画，你已经掌握了 Flutter UI 开发的核心基础。
从这一篇开始，我们进入一个全新的阶段------状态管理 （State Management）。我们将构建一个全新的应用：维基百科阅读器，它从维基百科 API 获取文章摘要并展示在界面上。
本文基于官方教程的「Set up your project」章节，今天的任务是搭建项目骨架、安装依赖包、准备数据模型。虽然还不会发起网络请求，但这些"地基"工作至关重要。
一、新项目要做什么？
在接下来几课中，我们将构建一个维基百科阅读器应用，它能做到：
- 从维基百科 API 发起 HTTP 请求获取文章数据
- 使用 ChangeNotifier 管理应用状态
- 采用 MVVM 架构模式组织代码
- 创建自动响应数据变化的用户界面
最终效果是一个能展示文章标题、描述、正文摘要和配图的阅读器。
1.1 这和 Birdle 有什么不同？
Birdle 的数据是本地的（单词列表写在代码里），不需要网络。而维基百科阅读器的数据来自互联网 API，这引入了几个新挑战：网络请求是异步的（需要等待响应）、数据格式是 JSON（需要解析）、数据可能随时变化（需要更好的状态管理）。
二、创建新项目
2.1 创建项目
打开终端，运行以下命令：
php
# 创建一个新的 Flutter 项目
# 项目名：wikipedia_reader
# --empty 参数：使用最简洁的模板，不生成默认的计数器示例代码
flutter create wikipedia_reader --empty2.2 添加 HTTP 依赖包
我们的应用需要发起网络请求，Flutter 本身不内置 HTTP 客户端，需要安装社区提供的 http 包：
bash
# 进入项目目录
cd wikipedia_reader
# 使用 flutter pub add 命令安装 http 包
# 这个命令会自动：
# 1. 在 pubspec.yaml 中添加依赖声明
# 2. 下载包到本地缓存
flutter pub add httpflutter pub add 是安装第三方包的标准方式。Flutter 的包生态系统托管在 pub.dev 上，那里有数万个社区贡献的包，涵盖网络请求、数据库、动画、地图等各种功能。
2.3 什么是 pubspec.yaml？
安装完 http 包后，打开项目根目录的 pubspec.yaml 文件，你会看到类似这样的内容：
yaml
# pubspec.yaml 是 Flutter/Dart 项目的配置文件
# 类似于 Node.js 的 package.json 或 Python 的 requirements.txt
name: wikipedia_reader # 项目名称
description: A Wikipedia reader app # 项目描述
dependencies:
flutter:
sdk: flutter
http: ^1.2.0 # ← 刚安装的 HTTP 包，版本号自动填入每当你用 flutter pub add 安装新包，它会自动出现在 dependencies 下面。
三、创建数据模型
3.1 什么是数据模型？
数据模型是一组 Dart 类，用来描述"数据长什么样"。维基百科 API 返回的是 JSON 格式的数据（一种通用的文本数据格式），我们需要把 JSON 转换成 Dart 对象才能方便地在代码中使用。
比如，维基百科返回的文章摘要包含标题、页面 ID、正文、缩略图等字段。我们需要一个 Summary 类来对应这些字段。
3.2 创建 summary.dart
在 lib/ 目录下创建 summary.dart 文件。这个文件包含三个数据类：
Summary：文章摘要的主类，包含标题、正文、图片、语言等ImageFile：图片信息（URL、宽度、高度）TitlesSet：标题集合（规范化标题、显示标题等）
这些类的核心功能是通过 fromJson 方法将 JSON 数据转换为 Dart 对象。代码较长但逻辑简单------就是字段映射，可以直接复制使用。完整代码见本文配套的代码库文件。
3.3 理解 fromJson 方法
dart
// fromJson 是一个静态工厂方法
// 它接收一个 JSON Map（如 {'title': 'Flutter', 'id': 123}）
// 返回一个 Summary 对象
static Summary fromJson(Map<String, Object?> json) {
// 使用 Dart 的 switch + 模式匹配语法
// 从 JSON Map 中提取字段值并创建 Summary 实例
return switch (json) {
{
'titles': final Map<String, Object?> titles,
'pageid': final int pageid,
'extract': final String extract,
// ... 更多字段
} => Summary(
titles: TitlesSet.fromJson(titles),
pageid: pageid,
extract: extract,
// ... 更多赋值
),
// 如果 JSON 格式不匹配，抛出格式异常
_ => throw FormatException('Could not deserialize Summary'),
};
}这里用到了 Dart 3 的模式匹配（pattern matching）语法。如果你还不熟悉也没关系，理解它的功能即可：从 JSON 中取值，创建对象。
四、搭建基本的应用结构
4.1 替换 main.dart
打开 lib/main.dart，替换为以下基础结构：
typescript
// 导入 JSON 解码库（后续用于解析 API 响应）
import 'dart:convert';
// 导入 IO 库（后续用于处理 HTTP 头信息等）
import 'dart:io';
// 导入 Flutter Material 组件库
import 'package:flutter/material.dart';
// 导入 http 包（我们刚安装的，用于发起网络请求）
import 'package:http/http.dart';
// 导入数据模型（我们刚创建的 Summary 类）
import 'summary.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// 标题栏
appBar: AppBar(
title: const Text('Wikipedia Flutter'),
),
// 页面内容：暂时显示"Loading..."占位文字
// 后续课程会替换为真实的文章内容
body: const Center(
child: Text('Loading...'),
),
),
);
}
}4.2 运行验证
arduino
# 运行应用，确认一切正常
flutter run -d chrome你应该能看到一个简单的页面：顶部标题栏显示"Wikipedia Flutter"，中间显示"Loading..."。这说明项目搭建成功，准备就绪。
五、项目文件结构
css
wikipedia_reader/
├── lib/
│ ├── main.dart ← 应用入口和基础 UI
│ └── summary.dart ← 数据模型（Summary、ImageFile、TitlesSet）
├── pubspec.yaml ← 项目配置（包含 http 依赖）
├── web/ ← Web 平台文件（自动生成）
└── test/ ← 测试文件目录（自动生成）后续课程会逐步添加更多文件，最终的项目结构会包含网络请求层、状态管理层和 UI 层------这就是 MVVM 架构的雏形。
六、本节知识点小结
新项目创建： flutter create --empty 创建最简洁的项目模板。每个新应用都从这里开始。
包管理： flutter pub add <包名> 安装第三方包。包的声明保存在 pubspec.yaml 中。Flutter 的包生态系统托管在 pub.dev 上。
数据模型： 将 API 返回的 JSON 数据映射为 Dart 类，方便在代码中使用。fromJson 工厂方法是解析 JSON 的标准做法。
项目结构： 从一开始就把代码按职责分文件（main.dart 放 UI，summary.dart 放数据模型），是良好的代码组织习惯。
七、下一步学习
项目骨架已经搭好，下一课我们将学习如何发起 HTTP 请求 （Make HTTP Requests），从维基百科 API 获取真实的文章数据，并把它解析成 Summary 对象。
我们下篇文章见！