无后端时如何开发Flutter票务预订应用？

你的FakeEventsService思路没问题，但可以从灵活性、贴近真实环境、可维护性几个维度优化，下面是几个实用方案：

1. 增强Mock Service的场景覆盖能力 #

给当前的FakeService添加可配置项，模拟不同业务场景（成功、错误、超时），同时通过环境变量统一控制真假服务的切换，方便后期无缝替换真实服务。

示例代码： #

class FakeEventsService implements EventsService {
  // 可配置模拟错误、延迟时间
  final bool simulateError;
  final Duration delay;

  FakeEventsService({this.simulateError = false, this.delay = const Duration(seconds: 1)});

  @override
  Future<List<Event>> fetchEventsList() async {
    await Future.delay(delay);

    // 模拟错误场景
    if (simulateError) {
      throw Exception('获取活动列表失败：网络超时');
    }

    final json = await rootBundle.loadString('assets/api/events.json');
    return eventFromJson(json);
  }
}

全局切换服务： #

void main() {
  // 用常量或环境变量控制，比如打包时通过--dart-define传入
  const useMockService = true;

  runApp(
    // 以Riverpod为例，其他状态管理框架同理
    ProviderScope(
      overrides: [
        eventsServiceProvider.overrideWithValue(
          useMockService 
              ? FakeEventsService() 
              : RealEventsService(http.Client()),
        ),
      ],
      child: const MyApp(),
    ),
  );
}

2. 本地HTTP服务器模拟真实后端 #

直接启动一个本地HTTP服务器，返回静态JSON文件，让应用的网络请求逻辑和真实后端完全一致，无需修改业务代码，后期只需要替换baseURL即可。

步骤： #

1. 添加依赖：http_server: ^1.0.0
2. 编写本地服务器代码（单独创建mock_server.dart）：

import 'dart:io';
import 'package:http_server/http_server.dart';

void main() async {
  // 绑定本地8080端口
  final server = await HttpServer.bind(InternetAddress.loopbackIPv4, 8080);
  print('Mock后端运行在：http://${server.address.host}:${server.port}');

  // 指向你的mock JSON文件目录
  final virtualDir = VirtualDirectory('./assets/api')
    ..defaultContentType = ContentType.json
    ..allowDirectoryListing = false;

  // 处理所有请求
  await for (final request in server) {
    virtualDir.serveRequest(request);
  }
}

3. 真实服务直接请求本地地址：

class RealEventsService implements EventsService {
  final http.Client _client;
  static const baseUrl = 'http://localhost:8080';

  RealEventsService(this._client);

  @override
  Future<List<Event>> fetchEventsList() async {
    final response = await _client.get(Uri.parse('$baseUrl/events.json'));
    if (response.statusCode == 200) {
      return eventFromJson(response.body);
    } else {
      throw Exception('请求失败：${response.statusCode}');
    }
  }
}

3. 用Mock HTTP客户端拦截请求 #

通过拦截HTTP请求直接返回Mock数据，无需维护FakeService类，完全复用真实服务的代码，适合不想额外开本地服务器的场景。

示例（以http_mock_adapter为例，适配dart http包）： #

1. 添加依赖：http_mock_adapter: ^0.5.0
2. 在main函数中配置拦截：

void main() {
  final client = http.Client();
  final mockAdapter = MockClientAdapter();
  
  // 绑定客户端到适配器
  client.adapter = mockAdapter;

  // 拦截GET请求，返回Mock数据
  mockAdapter.onGet(
    'https://your-real-api.com/events', // 真实API地址
    (request) async {
      await Future.delayed(const Duration(seconds: 1));
      return http.Response(
        await rootBundle.loadString('assets/api/events.json'),
        200,
      );
    },
  );

  // 也可以模拟错误请求
  mockAdapter.onGet(
    'https://your-real-api.com/events',
    (request) async => http.Response('服务器错误', 500),
    // 可以添加条件，比如特定参数时返回错误
  );

  runApp(
    ProviderScope(
      overrides: [
        eventsServiceProvider.overrideWithValue(RealEventsService(client)),
      ],
      child: const MyApp(),
    ),
  );
}

方案选择建议 #

• 快速验证UI逻辑：选增强版Mock Service，实现简单，切换方便；
• 模拟真实网络交互：选本地HTTP服务器，完全贴合真实请求流程；
• 复用真实服务代码：选Mock HTTP客户端，无需额外维护Fake类。

内容的提问来源于stack exchange，提问作者AJB