flutter_tiktok：Flutter 仿抖音短视频应用

本文介绍 flutter_tiktok，一个使用 Flutter 开发的仿抖音短视频应用，核心实现了流畅的上下滑动刷视频、左右滑动切换页面、双击爱心点赞等抖音标志性交互功能，是学习 Flutter 视频播放与复杂手势处理的优秀实战项目。

项目简介

flutter_tiktok 是由开发者 mjl0602 开源的一个 Flutter 仿抖音短视频应用项目。项目专注于实现抖音最核心的短视频观看体验，包括上下滑动刷视频、视频预加载与内存管理、左右滑动手势切换页面、双击点赞动画等核心功能。在 Android 和 iOS 原生平台上运行非常流畅，性能表现优异。

项目同时支持 Flutter Web，不过在移动端浏览器上的体验受限于 Flutter Web 本身的性能瓶颈，仍有一定的优化空间。开发者也在积极规划对 macOS、Linux、Windows 等全桌面平台的支持。

核心特性

流畅的视频滑动体验

项目的核心亮点在于视频滑动的流畅度。通过精心设计的手势处理与页面切换逻辑，实现了以下关键能力：

上下刷视频：视频会自动加载封面，支持无限下拉加载，滑动过程中动态新增播放器，严格控制内存占用
播放器生命周期管理：支持释放已经滑过的播放器，并在用户往回滑动时重新初始化播放器，且不依赖 Widget 的生命周期
视频预加载：支持可配置的视频预加载机制，可控制预加载的视频数量，提升用户滑动时的播放体验
不同屏幕比例适配：在细长屏幕上，底部 TabBar 不会叠加在视频画面上，App 会根据手机当前的屏幕比例自动判断布局

抖音标志性交互

项目完整还原了抖音最核心的交互设计：

左右滑动：左滑进入搜索页面，右滑进入个人中心页面，手势流畅自然
双击爱心点赞：在视频上双击会弹出爱心动画效果，还原抖音经典点赞交互
评论面板：底部弹出评论面板，样式高度还原抖音的评论界面
底部 TabBar 切换：仿抖音的底部导航栏，支持多个 Tab 页面切换
顶部切换组件：仿抖音顶部的"关注"和"推荐"切换组件

内存管理策略

对于短视频应用而言，内存管理是核心挑战之一。项目采取了以下策略来控制内存使用：

动态新增和释放播放器实例
支持向上滑动时回收不活跃的播放器资源
在无限滚动场景下通过数组追加实现更多视频内容
提醒开发者在加载一定量视频后释放不用的播放器，避免内存溢出导致闪退

技术栈

核心框架

Flutter：跨平台 UI 框架，支持 Android、iOS 和 Web，规划中还将支持 macOS、Linux、Windows

关键第三方依赖

项目保持了精简的依赖策略，仅引入了必要的第三方库：

yaml

dependencies:
  # 加载动画库
  flutter_spinkit: ^4.1.2
  # Bilibili 开源的视频播放组件
  fijkplayer: ^0.8.3
  # 基础的透明动画点击效果
  tapped: any
  # map 安全取值
  safemap: any

其中最核心的依赖是 fijkplayer，这是 Bilibili 开源的视频播放组件，基于 ijkplayer（FFmpeg），提供了强大的视频播放能力。此外，左右滑动手势代码借鉴了 ditclear/tiktok_gestures 项目的封装实现。

项目架构

项目代码结构清晰，采用了页面与组件分离的架构设计：

text

./lib
├── main.dart                    # 应用入口
├── mock/
│   └── video.dart               # 模拟视频数据
├── other/
│   └── bottomSheet.dart         # 自定义 BottomSheet 高度
├── pages/                       # 页面层
│   ├── homePage.dart            # 主页面，集成 TikTokScaffold
│   ├── cameraPage.dart          # 拍摄页（占位）
│   ├── searchPage.dart          # 搜索页
│   ├── userPage.dart            # 个人中心页
│   ├── msgPage.dart             # 消息页
│   └── ...
├── style/                       # 样式层
│   ├── style.dart               # 全局文字大小与颜色
│   └── text.dart                # 文字样式定义
└── views/                       # 组件层
    ├── tikTokScaffold.dart      # 核心脚手架，封装手势与切换
    ├── tikTokVideoPlayer.dart   # 视频播放页面 + VideoListController
    ├── tikTokVideo.dart         # 视频UI样式封装
    ├── tikTokVideoGesture.dart  # 双击点赞效果
    ├── tikTokVideoButtonColumn.dart  # 右侧按钮列
    ├── tikTokCommentBottomSheet.dart # 评论面板
    ├── tikTokHeader.dart        # 顶部切换组件
    ├── tiktokTabBar.dart        # 底部 TabBar
    └── ...

核心架构设计思想是将 tikTokScaffold.dart 作为不包含 UI 内容的纯逻辑脚手架，封装手势识别与页面切换功能，而 tikTokVideoPlayer.dart 则通过 VideoListController 类控制视频播放与滑动联动。这种分离设计使得 UI 层可以被完全替换，方便开发者根据自己的业务需求自定义页面。

安装指南

环境要求

Flutter SDK（建议使用稳定版本）
Android Studio / VS Code（安装 Flutter 和 Dart 插件）
Android SDK（Android 开发）或 Xcode（iOS 开发）

克隆项目

bash

git clone https://github.com/mjl0602/flutter_tiktok.git
cd flutter_tiktok

安装依赖并运行

bash

flutter pub get
flutter run

Web 运行

bash

flutter run -d chrome

注意：当前 Web 端支持已实现，但在移动端浏览器上体验有限，建议在桌面浏览器上测试。

快速开始

体验核心功能

启动应用后，即可体验以下核心功能：

上下滑动刷视频：在首页通过上下滑动来切换不同的短视频
左右滑动切换页面：左滑进入搜索页面，右滑进入个人中心
双击点赞：在视频画面上双击触发爱心点赞动画
查看评论：点击评论按钮打开底部评论面板
切换 TabBar：通过底部导航栏切换不同的功能页面

自定义视频数据

项目在 lib/mock/video.dart 中提供了模拟视频数据。开发者可以替换为实际的 API 接口数据：

dart

// 需要无限增加视频的，只需要在 PageView 滑动到最后时
// 给数组添加视频数据即可

使用示例

学习价值

本项目在以下几个技术维度上具有极高的学习参考价值：

视频播放与内存管理：

如何在 Flutter 中实现流畅的短视频列表
播放器的动态创建与释放策略
视频预加载机制的设计与实现
大量视频场景下的内存控制

复杂手势处理：

上下滑动与左右滑动的手势冲突解决
PageView 嵌套与手势传递
自定义手势识别与动画效果

UI 还原度：

抖音风格 UI 的精确还原
组件化拆分与复用
样式层与逻辑层的分离

商业项目应用

作者表示本项目的代码可以直接在商业项目中应用。开发者可以根据自己的业务需求，替换非视频业务的页面，保留核心的视频播放与交互体验，快速搭建自己的短视频应用。

已知问题与注意事项

Web 端性能受限于 Flutter Web 框架本身，移动端浏览器体验较差
加载大量视频后需要注意释放不用的播放器，避免内存溢出
拍摄页目前为占位页面，没有实际录制功能
项目规划中将在 iOS/Android 上重新启用 fijkplayer，并支持 macOS、Linux、Windows 桌面平台

项目链接

GitHub 仓库：https://github.com/mjl0602/flutter_tiktok
手势参考项目：https://github.com/ditclear/tiktok_gestures
视频播放组件：fijkplayer（Bilibili 开源）
开源协议：遵循 GitHub 默认开源协议

字节笔记本

flutter_tiktok：Flutter 仿抖音短视频应用

项目简介

核心特性

流畅的视频滑动体验

抖音标志性交互

内存管理策略

技术栈

核心框架

关键第三方依赖

项目架构

安装指南

环境要求

克隆项目

安装依赖并运行

Web 运行

快速开始

体验核心功能

自定义视频数据

使用示例

学习价值

商业项目应用

已知问题与注意事项

项目链接