Flutter跨端开发实战：OpenHarmony剧本杀App开发指南

1. 项目背景与核心需求

最近在开发一款基于OpenHarmony的剧本杀组队App，选择Flutter作为跨端框架主要是看中其高效的开发体验和良好的性能表现。剧本杀行业这两年发展迅猛，但线下组队效率低、信息不对称的问题一直存在。我们这款App要解决的核心痛点就是：让玩家快速找到附近合适的剧本杀店铺和场次，同时方便店铺展示特色剧本和组局信息。

技术选型上，Flutter for OpenHarmony这个组合可能很多人还不熟悉。简单来说，它让我们可以用Dart语言开发同时运行在OpenHarmony和其他平台的应用。相比原生开发，能节省至少30%的人力成本。这次要实现的店铺列表和详情页，是用户打开App最先接触的模块，直接关系到留存率。

2. 技术架构设计

2.1 整体技术栈

• 前端：Flutter 3.7 + Dart 2.19
• 跨端适配：OpenHarmony 3.2 Release
• 状态管理：Riverpod 2.3
• 网络请求：Dio 5.0
• 地图服务：高德地图Flutter插件

2.2 页面路由设计

采用基于GoRouter的导航方案，主要考虑两点：

1. 需要支持深链接跳转（比如从分享链接直接打开某个店铺）
2. 路由守卫需求（某些页面需要登录后才能访问）

路由配置示例：

dart复制final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const ShopListPage(),
      routes: [
        GoRoute(
          path: 'detail/:shopId',
          builder: (context, state) {
            final shopId = state.pathParameters['shopId']!;
            return ShopDetailPage(shopId: shopId);
          },
        ),
      ],
    ),
  ],
);

3. 店铺列表页实现

3