字
字节笔记本
2026年2月22日
Flutter_Eyepetizer:基于 Flutter 的精美仿开眼视频跨平台 App
本文介绍 Flutter_Eyepetizer,一个基于 Flutter + 组件化实现的精美仿开眼视频跨平台 App。该项目适合 Flutter 新手入门,帮助开发者快速掌握 Dart 语言基础语法以及 Flutter 开发技能。项目在 GitHub 上已获得 505+ stars,是学习 Flutter 实战开发的优秀开源项目。
项目简介
Flutter_Eyepetizer 是一款仿开眼视频(Eyepetizer)的跨平台移动应用,采用 Flutter 框架开发,支持 Android 和 iOS 双平台。该项目采用组件化架构设计,代码结构清晰,适合作为 Flutter 学习者的实战练手项目。
项目作者 fmtjava 还提供了其他技术栈的同款应用实现:
- Kotlin 版本: Kotlin_Eyepetizer
- React Native 版本: ReactNative_Eyepetizer
- 微信小程序版本: wx_eyepetizer
核心功能
该项目实现了开眼视频 App 的核心功能模块:
- 首页: 精选视频推荐、每日编辑精选
- 发现: 视频分类浏览、专题推荐
- 热门: 热门视频排行、趋势内容
- 分类: 多维度视频分类筛选
- 我的: 个人中心、观看记录、收藏
- 视频详情: 视频信息展示、相关推荐
- 视频播放: 高清视频播放、全屏切换
- 搜索功能: 关键词搜索、语音搜索(集成科大讯飞)
- 作者详情: 创作者信息、作品列表
技术栈
核心框架
- Flutter 3.0+: 跨平台 UI 框架
- Dart: 编程语言
状态管理
- Provider: 官方推荐的状态管理方案
网络与数据
- http: Dart 官方网络请求库
- cached_network_image: 图片缓存加载
视频播放
- Chewie: 基于 video_player 的 UI 封装
- video_player: 官方视频播放插件
路由导航
- GetX: 轻量级路由管理框架
本地存储
- sqflite: SQLite 数据库支持
- shared_preferences: 本地键值存储
UI 组件
- flutter_swiper: 轮播图组件
- flutter_staggered_grid_view: 瀑布流布局
- flutter_slidable: 侧滑删除组件
- pull_to_refresh: 下拉刷新组件
其他功能
- fluttertoast: Toast 提示
- permission_handler: 权限管理
- image_picker: 图片选择
- audioplayers: 音频播放(用于语音识别提示)
项目架构
项目采用组件化架构设计,代码结构清晰:
text
Flutter_Eyepetizer/
├── android/ # Android 原生代码
├── ios/ # iOS 原生代码
├── lib/ # Flutter 主工程代码
│ ├── main.dart # 应用入口
│ ├── app/ # 应用配置
│ ├── common/ # 公共工具类
│ ├── model/ # 数据模型
│ ├── network/ # 网络请求封装
│ ├── page/ # 页面
│ ├── provider/ # 状态管理
│ ├── widget/ # 自定义组件
│ └── main.dart # 应用入口
├── component/ # 公共组件模块
├── module/ # 业务模块
├── test/ # 测试代码
├── images/ # 图片资源
├── pubspec.yaml # 依赖配置
└── README.md # 项目说明安装指南
环境要求
- Flutter SDK 3.0 或更高版本
- Dart SDK 2.17 或更高版本
- Android Studio / Xcode(用于移动端开发)
克隆项目
bash
git clone https://github.com/fmtjava/Flutter_Eyepetizer.git
cd Flutter_Eyepetizer安装依赖
bash
flutter pub get运行项目
Android:
bash
flutter runiOS:
bash
cd ios && pod install && cd ..
flutter run快速开始
-
配置 Flutter 环境 确保已正确安装 Flutter SDK 并配置环境变量:
bashflutter doctor -
获取项目依赖
bashflutter pub get -
连接设备或启动模拟器
bashflutter devices -
运行应用
bashflutter run
核心代码示例
网络请求封装
dart
import 'package:http/http.dart' as http;
import 'dart:convert';
class HttpClient {
static Future<dynamic> get(String url) async {
final response = await http.get(Uri.parse(url));
if (response.statusCode == 200) {
return jsonDecode(response.body);
} else {
throw Exception('Failed to load data');
}
}
}Provider 状态管理
dart
import 'package:flutter/material.dart';
class VideoModel with ChangeNotifier {
List<Video> _videos = [];
List<Video> get videos => _videos;
void setVideos(List<Video> videos) {
_videos = videos;
notifyListeners();
}
}视频播放页面
dart
import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.dart';
class VideoPlayerPage extends StatefulWidget {
final String videoUrl;
VideoPlayerPage({required this.videoUrl});
@override
_VideoPlayerPageState createState() => _VideoPlayerPageState();
}
class _VideoPlayerPageState extends State<VideoPlayerPage> {
late VideoPlayerController _videoController;
late ChewieController _chewieController;
@override
void initState() {
super.initState();
_videoController = VideoPlayerController.network(widget.videoUrl);
_chewieController = ChewieController(
videoPlayerController: _videoController,
aspectRatio: 16 / 9,
autoPlay: true,
looping: false,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Chewie(controller: _chewieController),
);
}
@override
void dispose() {
_videoController.dispose();
_chewieController.dispose();
super.dispose();
}
}更新日志
v2.0.1
- 新增作者详情模块
v2.0.0
- 组件化重构项目
v1.1.6
- 专题列表页面添加列表滚动视频自动播放功能
- 跳转视频播放页面无缝续播功能
v1.1.5
- 完善多状态视图
- 添加加载失败重试功能
v1.0.8
- 接入 Get 轻量级路由框架
- 增加视频搜索功能,支持关键字搜索、语音识别搜索
- 语音识别使用 Flutter 与 Native 通信,调用科大讯飞语音识别
v1.0.7
- 接入 Provider 状态管理框架
- 重构部分页面逻辑,完成界面与数据分离
项目亮点
- 组件化架构: 项目采用模块化设计,便于维护和扩展
- 状态管理: 使用 Provider 实现界面与数据分离
- 视频播放: 完善的视频播放体验,支持全屏、手势控制
- 语音识别: 集成科大讯飞语音识别,支持语音搜索
- UI 动画: 使用 Hero 动画提升页面跳转体验
- 图片优化: 使用 cached_network_image 实现图片缓存
- 跨平台: 一套代码同时支持 Android 和 iOS
适用人群
- Flutter 初学者,希望学习实战项目开发
- 移动开发工程师,想了解 Flutter 跨平台开发
- 前端开发者,希望拓展移动端开发技能
- 对视频类 App 开发感兴趣的开发者
项目链接
- GitHub 仓库: https://github.com/fmtjava/Flutter_Eyepetizer
- Kotlin 版本: https://github.com/fmtjava/Kotlin_Eyepetizer
- React Native 版本: https://github.com/fmtjava/ReactNative_Eyepetizer
- 小程序版本: https://github.com/fmtjava/wx_eyepetizer
开源协议
本项目基于 MIT License 开源协议发布。
如果你喜欢这个项目,欢迎给作者一个 Star 或 Fork 支持!
分享: