网络与本地存储

这一课你将能做到

1. 用 http 或 dio 发 GET/POST/PUT/DELETE 请求，并处理响应状态码与 JSON
2. 用 shared_preferences 存简单的键值对（token、开关），用 sqflite 做本地结构化数据库
3. 用 FutureBuilder / StreamBuilder 优雅地把异步数据绑定到 UI，写完整的 CRUD 本地持久化流程

为什么要学

App 不只是静态 UI——要从服务器拿数据、缓存 token、存用户偏好。不会 IO 操作，Flutter 就是纯玩具。

人话：HTTP 是「打电话要外卖」，本地存储是「记在备忘录上」。两者配合，App 才能在线离线都可用。

先建立图像

UI 层
  ├── FutureBuilder / StreamBuilder  ← 异步数据绑定
  └── onPressed → 调用 Repository

Repository 层
  ├── Remote: dio.get('/api/todos') → JSON → Model
  └── Local: sqflite.query() / shared_preferences.getString()

跟着做

步骤 1：添加依赖

pubspec.yaml：

dependencies:
  http: ^1.2.0
  dio: ^5.4.0
  shared_preferences: ^2.2.0
  sqflite: ^2.3.0
  path_provider: ^2.1.0
  path: ^1.8.3

步骤 2：JSON 序列化（手动 + 生成）

class Todo {
  final int id;
  final String title;
  final bool done;

  Todo({required this.id, required this.title, this.done = false});

  // 手动方式
  factory Todo.fromJson(Map<String, dynamic> json) => Todo(
        id: json['id'] as int,
        title: json['title'] as String,
        done: json['done'] as bool? ?? false,
      );

  Map<String, dynamic> toJson() => {'id': id, 'title': title, 'done': done};
}

生产环境加 json_serializable 自动生成 fromJson/toJson。先理解手动方式再迁移。

步骤 3：用 http 发请求

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

Future<List<Todo>> fetchTodos() async {
  final resp = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/todos?_limit=5'));
  if (resp.statusCode == 200) {
    final list = jsonDecode(resp.body) as List;
    return list.map((e) => Todo.fromJson(e as Map<String, dynamic>)).toList();
  }
  throw Exception('请求失败: ${resp.statusCode}');
}

步骤 4：用 dio（更强大）

import 'package:dio/dio.dart';

class ApiClient {
  late final Dio _dio;

  ApiClient() {
    _dio = Dio(BaseOptions(
      baseUrl: 'https://jsonplaceholder.typicode.com',
      connectTimeout: const Duration(seconds: 10),
      receiveTimeout: const Duration(seconds: 10),
    ));

    _dio.interceptors.add(InterceptorsWrapper(
      onRequest: (opts, handler) {
        opts.headers['Authorization'] = 'Bearer $token';
        handler.next(opts);
      },
      onError: (err, handler) {
        if (err.response?.statusCode == 401) {
          // 统一跳登录
        }
        handler.next(err);
      },
    ));
  }

  Future<List<Todo>> getTodos() async {
    final resp = await _dio.get('/todos', queryParameters: {'_limit': 5});
    return (resp.data as List).map((e) => Todo.fromJson(e)).toList();
  }
}