字节笔记本

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 还提供了其他技术栈的同款应用实现:

核心功能

该项目实现了开眼视频 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 run

iOS:

bash
cd ios && pod install && cd ..
flutter run

快速开始

  1. 配置 Flutter 环境 确保已正确安装 Flutter SDK 并配置环境变量:

    bash
    flutter doctor
  2. 获取项目依赖

    bash
    flutter pub get
  3. 连接设备或启动模拟器

    bash
    flutter devices
  4. 运行应用

    bash
    flutter 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 状态管理框架
  • 重构部分页面逻辑,完成界面与数据分离

项目亮点

  1. 组件化架构: 项目采用模块化设计,便于维护和扩展
  2. 状态管理: 使用 Provider 实现界面与数据分离
  3. 视频播放: 完善的视频播放体验,支持全屏、手势控制
  4. 语音识别: 集成科大讯飞语音识别,支持语音搜索
  5. UI 动画: 使用 Hero 动画提升页面跳转体验
  6. 图片优化: 使用 cached_network_image 实现图片缓存
  7. 跨平台: 一套代码同时支持 Android 和 iOS

适用人群

  • Flutter 初学者,希望学习实战项目开发
  • 移动开发工程师,想了解 Flutter 跨平台开发
  • 前端开发者,希望拓展移动端开发技能
  • 对视频类 App 开发感兴趣的开发者

项目链接

开源协议

本项目基于 MIT License 开源协议发布。


如果你喜欢这个项目,欢迎给作者一个 Star 或 Fork 支持!

分享: