Flutter tiktok short video app.

Overview

flutter_tiktok

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

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

项目常见问题

  1. 和抖音不像:高手过招以点到为止,追求像素级一致没有意义,只要实现主要交互,可以随意根据自己的业务需求修改页面。
  2. 不能无限滑视频/播放器性能有问题:已添加对应功能(./lib/controller/tikTokVideoListController.dart)。
  3. UI性能问题:在安卓和iOS上,本项目都非常丝滑,没有性能问题。在web上会比较卡,在移动端尤其卡,是因为flutter web本身性能有限,坐等官方优化。

2021年7月5日更新

  • 现在支持无限下拉加载视频,会动态的新增播放器,控制内存占用
  • 现在支持释放之前的播放器,并支持在往回滑动时重新init(不依赖widget生命周期)
  • 同时支持了预加载视频,可以控制预加载数量
  • 现在视频会循环播放
  • 修复了暂停按钮不显示的问题

2021年6月17日更新

  • 使用flutter2.2重新创建项目
  • 改用video player
  • 支持空安全
  • 支持flutter web

实现功能

  • 上下刷视频,视频会自动加载封面
  • 左右滑动去搜索与个人中心
  • 双击冒爱心点赞
  • 看评论
  • 切换底部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 作者的封装,在此致谢。

请我喝咖啡

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

请我喝咖啡

Comments
  • 获取此问题视频更改 vdos

    获取此问题视频更改 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)

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

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

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

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

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

    • 有时候会网络加载失败,我采用的方法是重新填入原来的播放列表,强制刷新...
    opened by sunjianan9900 5
  • 视频比例不同时的问题

    视频比例不同时的问题

    https://user-images.githubusercontent.com/5417557/170851432-ae4f0030-d24c-44eb-8f7d-cf871bf1864b.mp4 视频比例不同时 在预加载中 如果上一个视频是4:3 下一个是16:9 会出现 16:9的视频 加载时 还是4:3的播放器比例 并且会有短暂黑屏获取不到视频缩略图 直接跑源码也存在一样的问题。

    opened by techistoner 4
  •  A ValueNotifier<bool> was used after being disposed & A TikTokVideoListController was used after being disposed.

    A ValueNotifier 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

    opened by gautamenbake 3
  • 在不断的滑动加载新视频过程中,会出现以下错误,不再加载

    在不断的滑动加载新视频过程中,会出现以下错误,不再加载

    [ERROR:flutter/lib/ui/ui_dart_state.cc(198)] Unhandled Exception: A VideoPlayerController was used after being disposed. E/flutter (31587): Once you have called dispose() on a VideoPlayerController, it can no longer be used.

    opened by sunyc1990 2
  • 【编译出错】FAILURE: Build failed with an exception.

    【编译出错】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

    opened by kyour-cn 2
  •  Invalid `Podfile` file: no implicit conversion of nil into String.

    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>'
    
    opened by cesariomartins 2
  • 多次提示 Waiting for a blocking GC Alloc,感觉像是内存溢出了

    多次提示 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)
    
    
    opened by coderlfm 1
  • How to use it in linux OS?

    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

    opened by connLAN 1
  • When the video is loaded slowly, the current video will not be closed. When switching the video, there will be background music that does not close the video

    When the video is loaded slowly, the current video will not be closed. When switching the video, there will be background music that does not close the video

    When the video is loaded slowly, the current video will not be closed. When switching the video, there will be background music that does not close the video

    opened by CarminBack 5
Owner
null
Generate a new file by compressed video, and provide metadata. Get video thumbnail from a video path, supports JPEG/GIF. To reduce app size not using FFmpeg in IOS.

flutter_video_compress Generate a new path by compressed video, Choose to keep the source video or delete it by a parameter. Get video thumbnail from

天海るり 179 Dec 8, 2022
USSD is similar to Short Message Service (SMS).

USSD is similar to Short Message Service (SMS). USSD uses codes made up of the characters that are available on a mobile phone. ... USSD can be used for Wireless Application Protocol (WAP) browsing, mobile money services, prepaid callback service, menu-based information services and location-based content services.

Behruz Hurramov 4 Nov 15, 2022
Slibro is a full-fledged story writing and publishing platform that supports short and long format stories

Slibro is a full-fledged story writing and publishing platform that supports short and long format stories. Flutter, Appwrite, and Rapyd is use

Souvik Biswas 7 Dec 8, 2022
Munem Sarker 1 Jan 25, 2022
Android app to show movie ratings when browsing Netflix, Amazon Prime Video and other supported video streaming apps on the phone

Flutter - Movie Ratings You can get the latest Playstore version here on Playstore - or download directly - 0.4.5 Screenshots of master Search Page Fa

Jay Rambhia 71 Nov 23, 2022
YoYo Video Player is a HLS(.m3u8) video player for flutter.

YoYo Video Player YoYo Video Player is a HLS(.m3u8) video player for flutter. The video_player is a video player that allows you to select HLS video s

Ko Htut 89 Dec 23, 2022
Video player-2.2.10 - A Flutter plugin for iOS, Android and Web for playing back video on a Widget surface

Video Player plugin for Flutter A Flutter plugin for iOS, Android and Web for pl

null 2 Sep 29, 2022
Chat-App - A Chat App with flutter and Firebase and Video Calling using WebRTC

chat_app A chat app with flutter and firebase with image message support and vid

Reza Hosseinypour 10 Nov 23, 2022
Caffodils - Download everything | Flutter app for Android and IOS. Download Video, Reels, Shorts, Music, Images, Files from Instagram, Facebook and Youtube

caffodils Caffodils - Download everything Flutter app for Android and IOS. Download Video, Reels, Shorts, Music, Images, Files from Instagram, Faceboo

Caffodils 11 Oct 24, 2022
Flutter Video Conferencing SDK & Sample App

100ms Flutter SDK ?? Here you will find everything you need to build experiences with video using 100ms iOS/Android SDK. Dive into our SDKs, quick sta

100ms 79 Dec 22, 2022
Videoconferenceapp - Hangout - A Video Conference App With Flutter

Hangout Mobile App Video conferencing app Art Getting Started This project is a

Mayur Sakhiya 8 Nov 2, 2022
In this video, we learn how to do integrate Google Admob with Flutter with latest Flutter 2.0 Google Admob Package.

?? Monetizing Flutter apps with Google AdMob ?? In this video, we learn how to do integrate Google Admob with Flutter with latest Flutter 2.0 Google A

SnippetCoder 14 Nov 30, 2022
Flutter WebRTC demo with Python server to perform image processing on video frames using OpenCV

flutter + webrtc => python + aiortc + opencv This demo project should help you to get setup sending a video feed from a flutter app to a python backen

John Crisp 42 Dec 29, 2022
🎞 Flutter media playback, broadcast & recording library for Windows, Linux & macOS. Written in C++ using libVLC & libVLC++. (Both audio & video)

dart_vlc Flutter media playback, broadcast, recording & chromecast library for Windows, Linux & macOS. Written in C++ using libVLC & libVLC++. Install

Hitesh Kumar Saini 417 Dec 29, 2022
Better video player for Flutter, with multiple configuration options. Solving typical use cases!

Better Player Advanced video player based on video_player and Chewie. It's solves many typical use cases and it's easy to run. Introduction This plugi

Jakub 733 Jan 3, 2023
Flutter video player widget based on video_player

Neeko Simple video player widget based on video_player. Neek supports more actions such as timeline control, toggle fullscreen and so on. Note: This p

OpenFlutter 70 Oct 20, 2022
Microsoft Teams Clone is a Video conference application with a rich integrated chat experience, to connect with friends,family & colleagues. Developed as a redesign of Microsoft Teams during my menteeship at Microsoft Engage 2021

Microsoft Teams Clone by Karanjot Singh About Microsoft Teams Clone is a Video conference application with a rich integrated chat experience, to conne

Karanjot Singh 60 Dec 28, 2022
null 357 Dec 27, 2022
Compress videos, remove audio, manipulate thumbnails, and make your video compatible with all platforms through this lightweight and efficient library.

video_compress Compress videos, remove audio, manipulate thumbnails, and make your video compatible with all platforms through this lightweight and ef

Jonny Borges 172 Dec 31, 2022