Code Monkey home page Code Monkey logo

flutter_tiktok's Introduction

flutter_tiktok

仿写抖音的flutter app。主要实现了看视频功能,可以非常流畅的刷视频,左右滑,点小爱心。

当前支持了flutter_web,但是在移动端浏览器的体验非常有限。

新特性(开发中)

🎉欢迎大家对本项目的关注,我本来是想等官方的videoplayer支持全部平台后,再扩展到全平台的。

但是现在看到pub上已经有了各个平台的播放器,所以本项目即将要支持全部平台啦🎉🎉🎉。

以下为正在开发中,计划支持的功能:

  • 在iOS/Android系统上重新启用fijkplayer
  • 支持MacOS系统
  • 支持Linux系统
  • 支持Windows系统

项目常见问题

  1. 和抖音不像:主要交互已完全实现,可以随意根据自己的业务需求修改页面。
  2. UI性能问题:在安卓和iOS上,本项目都非常丝滑,没有性能问题。在web上会比较卡,在移动端web平台尤其卡,是因为flutter web本身性能有限,移动端的浏览器性能也较弱,此处只能坐等官方优化。

有其他问题也可以加Q群反馈

FlutterCandies

进群需要回答基础知识问题。

实现功能

  • 上下刷视频,视频会自动加载封面,支持无限下拉加载视频,会动态的新增播放器,控制内存占用
  • 支持释放之前的播放器,并支持在往回滑动时重新init(不依赖widget生命周期)
  • 支持了预加载视频,可以控制预加载数量
  • 左右滑动去搜索与个人中心
  • 双击冒爱心点赞
  • 看评论
  • 切换底部Tabbar

应用截图

截图1

细节

适配了不同比例屏幕,在细长的屏幕上,底部tabbar不会叠加在视频上:

截图1

图示为debug下强行调整的效果,App会根据手机当前的屏幕比例来自动判断

其他

其他页面不属于视频业务的,就简单仿写了样式。需要自定义项目的话,简单替换成自己写的各种页面即可。

需要无限增加视频的,只需要在PageView滑动到最后的时候给数组添加视频就行,很简单。

加载一定量视频后记得释放掉不用的播放器,避免内存用太多而闪退。

项目结构

依赖:

  # 加载动画库(好像改版之后就没用到了)
  flutter_spinkit: ^4.1.2
  # Bilibili开源的视频播放组件
  fijkplayer: ^0.8.3
  # 基础的透明动画点击效果
  tapped: any
  # map安全取值
  safemap: any

主要文件:

./lib
├── main.dart
├── mock
│   └── video.dart # 假数据
├── other
│   └── bottomSheet.dart # 修改了系统BottomSheet的高度
├── pages
│   ├── cameraPage.dart # 拍摄页(没有实际功能)
│   ├── followPage.dart  #
│   ├── homePage.dart # 主页面,包含tikTokScaffold的实际应用功能
│   ├── msgDetailListPage.dart #
│   ├── msgPage.dart #
│   ├── searchPage.dart #
│   ├── todoPage.dart #
│   ├── userDetailPage.dart #
│   ├── userPage.dart #
│   └── walletPage.d #
├── style
│   ├── style.dart # 全局文字大小与颜色
│   └── text.dart # 主要的几个文字样式
└── views
    ├── backButton.dart # iOS形状的返回按钮组件
    ├── loadingButton.dart # 可以设置为载入样式的按钮组件
    ├── selectText.dart # 可设置为“选中”或者“未选中”样式的文字
    ├── tikTokCommentBottomSheet.dart # 仿Tiktok评论样式
    ├── tikTokHeader.dart # 仿Tiktok顶部切换组件
    ├── tikTokScaffold.dart # 仿Tiktok核心脚手架,封装了手势与切换等功能,本身不包含UI内容
    ├── tikTokVideo.dart # 仿Tiktok的视频UI样式封装,不包含视频播放
    ├── tikTokVideoButtonColumn.dart # 仿Tiktok视频右侧的头像与点赞等按钮列的组件
    ├── tikTokVideoGesture.dart # 仿Tiktok的双击点赞效果
    ├── tikTokVideoPlayer.dart # 视频播放页面,带有控制滑动的VideoListController类
    ├── tiktokTabBar.dart # 仿Tiktok的底部Tabbar组件
    ├── tilTokAppBar.dart # 仿Tiktok的Appbar组件
    ├── topToolRow.dart # 用户页面的顶部状态,在tab切换到user页面时隐藏返回按钮
    └── userMsgRow.dart # 一条用户信息的样式组件

致谢

左右滑动手势代码来自项目 https://github.com/ditclear/tiktok_gestures 作者的封装,在此致谢。

请我喝咖啡

我相信本项目的代码一定能在商业项目上帮助到您,如果您从本项目中获益,不妨请作者我喝杯咖啡:

请我喝咖啡

flutter_tiktok's People

Contributors

leeyisoft avatar maninthewind avatar mjl0602 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flutter_tiktok's Issues

clone代码运行报错

Compiler message:
../../soft/flutter/packages/flutter/lib/src/material/text_theme.dart:117:9: Error: The superclass, 'Diagnosticable', has no unnamed constructor that takes no arguments.
const TextTheme({

【编译出错】FAILURE: Build failed with an exception.

FAILURE: Build failed with an exception.

  • What went wrong:
    Execution failed for task ':app:checkReleaseAarMetadata'.

Multiple task action failures occurred:
A failure occurred while executing com.android.build.gradle.internal.tasks.CheckAarMetadataWorkAction
> The minCompileSdk (31) specified in a
dependency's AAR metadata (META-INF/com/android/build/gradle/aar-metadata.properties)
is greater than this module's compileSdkVersion (android-30).
Dependency: androidx.window:window-java:1.0.0-beta04.
AAR metadata file: C:\Users\kyour.gradle\caches\transforms-2\files-2.1\5695d8d932d545af38bf66b725566d02\jetified-window-java-1.0.0-beta04\META-INF\com\android\build\gradle\aar-metadata.properties.
A failure occurred while executing com.android.build.gradle.internal.tasks.CheckAarMetadataWorkAction
> The minCompileSdk (31) specified in a
dependency's AAR metadata (META-INF/com/android/build/gradle/aar-metadata.properties)
is greater than this module's compileSdkVersion (android-30).
Dependency: androidx.window:window:1.0.0-beta04.
AAR metadata file: C:\Users\kyour.gradle\caches\transforms-2\files-2.1\e4e324fde2799cc82a9b6d2e3e16efc2\jetified-window-1.0.0-beta04\META-INF\com\android\build\gradle\aar-metadata.properties.

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

  • Get more help at https://help.gradle.org

多次提示 Waiting for a blocking GC Alloc,感觉像是内存溢出了

我把这个主页中复制到我的项目中,虽然能够播放,但是播放了一会就会多次提示下面的报错,期中一次导致应用闪退, 我是在 Getx 中使用的

I/o.learn_englis(25725): Clamp target GC heap from 517MB to 512MB
I/chatty  (25725): uid=10150(com.liufengmao.learn_english) HeapTaskDaemon identical 5 lines
2
I/o.learn_englis(25725): Clamp target GC heap from 517MB to 512MB
I/chatty  (25725): uid=10150(com.liufengmao.learn_english) HeapTaskDaemon identical 16 lines
I/o.learn_englis(25725): Clamp target GC heap from 517MB to 512MB
I/o.learn_englis(25725): Background young concurrent copying GC freed 24(872B) AllocSpace objects, 0(0B) LOS objects, 0% free, 511MB/512MB, paused 9.007ms total 14.951ms
I/o.learn_englis(25725): Clamp target GC heap from 517MB to 512MB
I/chatty  (25725): uid=10150(com.liufengmao.learn_english) HeapTaskDaemon identical 2 lines
3
I/o.learn_englis(25725): Clamp target GC heap from 517MB to 512MB
I/chatty  (25725): uid=10150(com.liufengmao.learn_english) HeapTaskDaemon identical 16 lines
2
I/o.learn_englis(25725): Clamp target GC heap from 517MB to 512MB
I/chatty  (25725): uid=10150(com.liufengmao.learn_english) HeapTaskDaemon identical 16 lines
I/o.learn_englis(25725): Clamp target GC heap from 517MB to 512MB
I/o.learn_englis(25725): Waiting for a blocking GC Alloc
2
I/o.learn_englis(25725): Starting a blocking GC Alloc
I/o.learn_englis(25725): Clamp target GC heap from 517MB to 512MB
I/o.learn_englis(25725): Alloc concurrent copying GC freed 294(42KB) AllocSpace objects, 0(0B) LOS objects, 0% free, 511MB/512MB, paused 276us total 18.528ms
E/ExoPlayerImplInternal(25725): Playback error
E/ExoPlayerImplInternal(25725):   com.google.android.exoplayer2.ExoPlaybackException: Source error
E/ExoPlayerImplInternal(25725):       at com.google.android.exoplayer2.ExoPlayerImplInternal.handleMessage(ExoPlayerImplInternal.java:580)
E/ExoPlayerImplInternal(25725):       at android.os.Handler.dispatchMessage(Handler.java:103)
E/ExoPlayerImplInternal(25725):       at android.os.Looper.loop(Looper.java:214)

内存问题

页面多了内存会原来越大,请问怎么解决

获取此问题视频更改 vdos

[ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: PlatformException(VideoError, Video player had error com.google.android.exoplayer2.ExoPlaybackException: MediaCodecVideoRenderer error, index=0, format=Format(1, null, null, video/avc, avc1.64001F, -1, null, [540, 960, 30.0], [-1, -1]), format_supported=YES, null, null)

多次上下滑动后,App崩溃

作者提供了几个在线资源短视频作为mock数据。
初次加载homePage时,将mock的视频数据列表一次性添加到playerList 视频列表。
然而,在红米redMi 7A 真机运行时,不断上下翻动短视频页面。切换6-10次左右,App崩溃。
现在我还不知道什么原因。希望作者帮忙看看。感激。。

i need help

image

我如何在切换其他tab的时候 暂停视频呢
image

我保持了页面状态的

build web 在safari并不能播放

你好, build web版本, 丢到safari上, 播放不了视频, play函数调用了没有效果, 只有把video control显示出来,点击control的播放按钮才能播放, 有办法解决吗??

A ValueNotifier<bool> was used after being disposed & A TikTokVideoListController was used after being disposed.

Actually, I'm showing continuous video player [similar to homePage] on upper layer (means in separate screen).

I had opened videoplayer and close it, at the dispose time it shows these errors

I'm doing this in dispose method

 @override
  void dispose() {
    WidgetsBinding.instance!.removeObserver(this);
    _videoListController.currentPlayer.pause();
    _videoListController.dispose();
    super.dispose();
  }

the error comes on this line on pause method of the video

 @override
  Future<void> pause({bool showPauseIcon: false}) async {
    await Future.wait(_actLocks);
    _actLocks.clear();
    await init();
    if (!prepared) return;
    if (_disposeLock != null) {
      await _disposeLock?.future;
    }
    await this.controller.pause();
    **------------_showPauseIcon.value = true;------------**
  }

@mjl0602 looking for your help

The named parameter 'scrollBehavior' isn't defined.

Getting issue in pageView.dart file.

Error message "The named parameter 'scrollBehavior' isn't defined.
Try correcting the name to an existing named parameter's name, or defining a named parameter with the name 'scrollBehavior'."

Error message "The method 'copyWith' isn't defined for the type 'ScrollBehavior'.
Try correcting the name to the name of an existing method, or defining a method named 'copyWith'."

Can you please help me with this issue?

Thanks,
Deepraj

你好,我发现项目的这些问题,能否收pr或一起维护

你好,你这个项目我非常敢兴趣,非常想一起维护或者提pr,我的github用户名:ahyangnb

目前项目需要维护的地方:
1.评论滑到顶部继续滑不会收起。
2.缺少长按提示对话框。
3.缺少右下角音频转动和左下角音频名轮播。
4.用户名页面目前是静态的。

希望能一起优化,把这个开源项目做好,目前我有多个上千人flutter群,到时候可以推广拉star。

How to use it in linux OS?

I am newbee for flutter, I can't run it at all, Could you give me some help?
I git clone it , and then do :
flutter pub get
fluterr build web
google-chrome build/web/index.html

But I see nothing. The linux terminal print some error messages,
libva error: vaGetDriverNameByIndex() failed with unknown libva error, driver_name = (null)
[62319:62319:0102/154436.247738:ERROR:sandbox_linux.cc(376)] InitializeSandbox() called with multiple threads in process gpu-process.
[62156:62182:0102/154442.117641:ERROR:chrome_browser_main_ex

star已给

当我把tikTokVideoListController和video 单独抽离出来没有任何问题, pageview在home里我抽离homepage会涉及到很多很多东西,

Invalid `Podfile` file: no implicit conversion of nil into String.

Invalid Podfile file: no implicit conversion of nil into String.

from /Users/cesariomartins/apps/flutter_tiktok/ios/Podfile:57

 #  -------------------------------------------
 #      unless File.exist?(copied_framework_path)
 >        FileUtils.cp_r(File.join(cached_framework_dir, 'Flutter.framework'), copied_flutter_dir)
 #      end
 #  -------------------------------------------

/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:318:in `rescue in block
in from_ruby'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:312:in `block in
from_ruby'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:50:in `instance_eval'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:50:in `initialize'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:310:in `new'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:310:in `from_ruby'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-core-1.10.1/lib/cocoapods-core/podfile.rb:276:in `from_file'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/config.rb:205:in `podfile'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/command.rb:160:in `verify_podfile_exists!'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/command/install.rb:46:in `run'
/Library/Ruby/Gems/2.6.0/gems/claide-1.0.3/lib/claide/command.rb:334:in `run'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/command.rb:52:in `run'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/bin/pod:55:in `<top (required)>'
/usr/local/bin/pod:23:in `load'
/usr/local/bin/pod:23:in `<main>'

有时候只有声音没有画面是怎么回事?还有加载失败重播应该如何处理比较好?

有时候只有声音没有画面是怎么回事?

  • 大概持续向下刷一段时间,就会出现视频闪一下然后开始播放声音,但是屏幕是黑的。同时失去控制,控制台打印currentplayer的value,状态也不是正在播放。等于完全没有办法控制了,像是漏网一样。

还有加载失败重播应该如何处理比较好?

  • 有时候会网络加载失败,我采用的方法是重新填入原来的播放列表,强制刷新...

联系请求

你好 我们是一个短视频创业项目 看过你的代码之后希望与你建立联系

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.