一个使用 Flutter 开发的短剧播放 App 原型,面向海外用户,重点探索沉浸式刷剧、找剧和连续观看的移动端体验
主要功能
- 沉浸式首页:竖屏播放,上下滑切换短剧,左右滑切换内容类别;支持拖动进度、横屏全屏观看。
- 剧集播放:从详情页进入后按集连续播放,支持选集和本地续看。
- 找剧与个人页:浏览、搜索和查看剧集详情;在个人页查看观看记录、收藏与喜欢的内容。
- 互动与多语言:本地演示评论、系统分享,以及英文、简体中文和印尼语界面。
- 画中画:Android 接入系统画中画;iOS 画中画尚未实现。
技术实现
项目使用 Flutter、Provider 和 video_player。播放会话统一管理播放器生命周期;观看进度和演示互动数据保存在本机。首页、找剧、我的共用同一个根页面,切换时保留页面状态。
对接后端
目录数据来自短剧服务的客户端接口(FruitServer 的 fruitshorts-app-api,默认 http://127.0.0.1:8081):
GET /app/home/feed、GET /app/discover/feed:轮播 + 分区,一次请求渲染整页。 每张卡片带preview(首个可播免费集),首页竖屏播放可以直接起播; 没有片源的剧不下发preview,也不会出现在首页的滑动队列里GET /app/dramas/{id}:详情(含剧集列表;可播放的剧集直接带播放地址)GET /app/episodes/{id}/play:播放票据,返回可访问性与地址
启动后端后直接 flutter run 或 Xcode 里 Run 即可,接口地址按运行环境自动选择
(见 lib/core/config/app_config.dart):
| 运行环境 | 默认地址 |
|---|---|
| iOS 模拟器 / 桌面端 | http://127.0.0.1:8081 |
| iPhone 真机 | [devHostBaseUrl],即电脑当前的局域网地址(ipconfig getifaddr en0) |
| Android 模拟器 | 需手动指定 --dart-define=API_BASE_URL=http://10.0.2.2:8081 |
任何环境都可以用 --dart-define=API_BASE_URL=http://x.x.x.x:8081 覆盖默认值。
电脑换网络后局域网地址会变,改 devHostBaseUrl 即可;也可以换成 Bonjour 名字
(http://$(scutil --get LocalHostName).local:8081),换网络也不用改。
真机调试还需注意:手机和电脑在同一个 Wi-Fi;首次启动时 iPhone 会弹「本地网络」权限,
必须允许;iOS 的明文 HTTP 与局域网访问已在 ios/Runner/Info.plist 里放行
(NSAllowsLocalNetworking、NSLocalNetworkUsageDescription),改动这些配置后
要重新构建安装,热重载不生效;如果仍连不上,到「系统设置 → 网络 → 防火墙 → 选项」
把 java 设为允许传入连接。
封面与视频都走 http://<host>:8081/files/**,本地不再打包演示素材
(原先 assets/media 里的演示视频有 316MB,已从打包清单移除)。
当前说明
收藏、点赞、评论与观看进度仍保存在本机(后端互动接口尚未开发); 金币与会员相关界面仍是占位数据。