点个赞支持下吧🍔
pub地址：https://pub.dev/packages/flutter_barrage_craft
github地址：https://github.com/taxze6/flutter_barrage_craft
该插件灵感来自我的IM开源项目：https://github.com/taxze6/flutter-chat-craft，具体信息可以查看我的置顶文章：https://juejin.cn/post/7329350541137920054
关于☘
2024 © Taxze
Flutter Barrage Craft是一个全平台可用的弹幕组件。它可以自动计算弹幕widget的Size，并插入到弹幕轨道当中。支持全部弹幕的暂停、播放、运动速度控制，支持单个弹幕的暂停、播放、单击事件、双击事件...
什么时候需要该组件🍖
- 短视频平台、直播平台...等需要弹幕的场景
flutter-barrage-craft可以让您在几分钟内完成集成，只需要将弹幕数据传入弹幕控制器即可。这样，您可以将更多的精力用于编写处理弹幕数据相关功能代码。
- 滚动动画相关功能
flutter-barrage-craft虽然是一个弹幕插件，但是可以借助该插件完成滚动动画相关功能，只需要将滚动的数据循环进弹幕控制器即可。
该例子来自flutter-chat-craft
功能演示🌮
安装🍩
运行 flutter pub add flutter_barrage_craft 或者手动添加 flutter_barrage_craft 到 pubspec.yaml 依赖项。
dependencies: flutter_barrage_craft: ^latest_version
然后，运行 flutter pub get 安装该插件。
用法🍝
要在 Flutter 中使用 flutter_barrage_craft，请首先导入包：
import 'package:flutter_barrage_craft/flutter_barrage_craft.dart';
初始化弹幕控制器
在initState中通过WidgetsBinding.instance.addPostFrameCallback回调函数传入弹幕移动区域，此处传入的移动区域为Size(MediaQuery.of(context).size.width, 300)。
BarrageController controller = BarrageController(); @override void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((_) { setState(() { controller.init(Size(MediaQuery.of(context).size.width, 300)); }); }); }
通过控制器添加弹幕
您可以将任何正常渲染的widget通过addBarrage添加到弹幕队列中。
方式一：已经手动计算完成widget size
💥我推荐您选择这种方式，因为会减少一次对传入widget的build，有一定的性能提升。
controller.addBarrage( barrageWidget: const SizedBox( width: 100, height: 20, child: Text( "Test Barrage", style: TextStyle( fontSize: 14, color: Colors.white, ), ), ), widgetSize: const Size(100, 20), );
方式二：非固定尺寸（unconstrained）的widget size
🚩这种方式非常方便，如果您无法确定传入widget的尺寸，没关系，把它交给flutter_barrage_craft，flutter_barrage_craft会完成对该widget的尺寸计算。
使用该方式需注意：
1.会额外build一次widget，用于尺寸计算。
2.必须要传入BuildContext，否则无法通过 assert(context != null) 。
controller.addBarrage( barrageWidget: Container( padding: const EdgeInsets.symmetric( horizontal: 20, vertical: 12, ), decoration: BoxDecoration( color: Colors.primaries[ Random().nextInt(Colors.primaries.length)], ), child: const Row( mainAxisSize: MainAxisSize.min, children: [ FlutterLogo(), SizedBox( width: 12, ), Text( "Container Test Barrage", style: TextStyle( fontSize: 16, color: Colors.white, ), ), ], ), ), context: context, );
给弹幕添加单击/双击事件
添加单击事件
controller.setBarrageTapCallBack((value) { print(value); });
添加双击事件
controller.setBarrageDoubleTapCallBack((value) { print(value); });
给弹幕添加渲染/移除屏幕监听事件
添加单个弹幕完成显示在屏幕上处理
controller.setSingleBarrageShowScreenCallBack((value) { print(value); });
添加单个弹幕移除屏幕处理
controller.setSingleBarrageRemoveScreenCallBack((value) { print(value); });
添加全部弹幕移除屏幕处理
controller.setAllBarragesRemoveScreenCallBack((value) { print(value); });
改变弹幕移动速度
传入任何大于0的浮点数。
该例子是在原有移动速度上加速3倍。
controller.changeBarrageRate(3.0);
如果需要回到原来移动速度，只需要传入1。
controller.changeBarrageRate(1.0);
播放/暂停弹幕
播放
controller.play();
暂停
controller.pause();
暂停/播放单个弹幕
只需要将该弹幕的 pause = !pause即可，下面是通过单击事件实现的暂停/播放单个弹幕。
controller.setBarrageTapCallBack((value) { print(value.toString()); //Pause a single barrage. setState(() { value.pause = !value.pause; }); });
