一个前端仔的Flutter踩坑笔记

从配置环境开始就踩坑

装Flutter SDK时，我因Android Studio装在D盘，路径含中文空格导致flutter doctor报错，找不到Android SDK。最终在GitHub Issue里找到方案：将Android SDK路径改为短路径格式。

[!] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.

解决后全绿的瞬间，比当年调通React的webpack配置还爽。

第一个项目：仿HeyGen的AI虚拟人界面

需求是做AI虚拟人对话界面。视频播放器选型首先遇坑：官方video_player插件在旧款OPPO上播放MP4花屏。换用chewie封装后解决，但列表嵌入多个视频预览时滑动掉帧严重。

ListView.builder(
  itemCount: videos.length,
  addAutomaticKeepAlives: false,
  addRepaintBoundaries: true,
  itemBuilder: (context, index) {
    return RepaintBoundary(
      child: VideoPreviewCard(video: videos[index]),
    );
  },
);

跟后端对接A2A协议

项目需实现Agent-to-Agent通信，采用WebSocket。web_socket_channel库断线重连机制差，网络切换即断。我封装了连接管理器，加入指数退避重连逻辑。

class WebSocketManager {
  WebSocketChannel? _channel;
  int _reconnectAttempts = 0;
  
  void connect(String url) {
    _channel = WebSocketChannel.connect(Uri.parse(url));
    _channel!.stream.listen(
      _handleMessage,
      onError: (error) => _reconnect(),
      onDone: () => _reconnect(),
    );
  }
  
  void _reconnect() {
    if (_reconnectAttempts < 5) {
      _reconnectAttempts++;
      Future.delayed(
        Duration(seconds: pow(2, _reconnectAttempts).toInt()),
        () => connect(_currentUrl),
      );
    }
  }
}

状态管理选了Provider，后悔了

初期用Provider，跨页面传参痛苦，嵌套层级深。后重构成Riverpod，代码清爽许多。虽然学习成本高，但值得。

关于Kiro的尝试

语音输入需求本想用speech_to_text插件做实时识别，但准确率低，如“发送消息”识别成“发怂消息”。最终妥协为录音上传方案。这凸显跨平台框架在硬件能力上的局限。

打包发布的血泪史

Android首次打包APK体积达80MB，因引入无用库和未压缩图片。使用flutter build apk --split-per-abi后降至25MB。应用市场审核因权限声明不清被拒三次才过审。

写在最后

折腾近三周，App上线。作为文科转前端，我认为Flutter学习曲线友好，Dart与JavaScript相似。但它并非银弹，性能优化、原生交互等坑仍不少。对中小团队，一套代码搞定两端能省成本。建议直接上手写项目，踩坑是最好的学习方式。