flutter-barrage-craft — 能成为pub.dev中最好用的弹幕插件吗🤔?

简介: Hi👋,最近我开发了一个弹幕插件,想知道它是否有成为 pub.dev 中最好用的弹幕插件的潜力。能帮我评估一下吗?🐱‍🏍

点个赞支持下吧🍔

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_craftpubspec.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_craftflutter_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;
  });
});
相关文章
|
4天前
|
传感器 Android开发 iOS开发
Flutter插件开发指南02: 事件订阅 EventChannel
上一节我们讲了 Channel 通道,但是如果你是卫星定位业务,原生端主动推消息给 Flutter 这时候就要用到 EventChannel 通道了。 本节会写一个 1~50 的计数器,到 50 后自动关闭原生的消息订阅。
Flutter插件开发指南02:  事件订阅 EventChannel
|
4天前
|
Java Linux API
Flutter插件开发指南01: 通道Channel的编写与实现
Flutter插件是Flutter应用程序与原生平台之间的桥梁,使得Flutter应用程序可以与原生代码进行交互,从而扩展Flutter应用程序的功能和能力。Flutter插件通常包括Dart和原生代码(例如Java、Kotlin或Objective-C、Swift等),并可以通过Flutter插件框架来注册、管理和调用。
Flutter插件开发指南01: 通道Channel的编写与实现
|
7月前
Flutter笔记:电商中文货币显示插件Money Display
实战中的电商应用货币显示有一些繁琐,比如需要在数字中插入逗号分隔符、需要判断金额数量级,为大的数量级添加单位(比如超过10000时添加万字),处理超出最大金额显示,考虑数位的保留,处理小数点后多余的0,等等。为此我做了一个小模块,用于自动处理这些问题,没有特殊需求的情况下,可以仅仅传入一个double数。如果有需要,你可以通过考虑传入不同参数以指定更多的样式。
56 0
|
7月前
|
前端开发 机器人 数据安全/隐私保护
Flutter笔记:手写并发布一个人机滑动验证码插件
写 Flutter 项目时,遇到需要滑块验证码功能。滑块验证码属于人机验证码的一种,看起来像是在一个图片中“挖去”了一块,然后通过用户手动操作滑块,让被“挖去”的部分移回来。由于我不想使用各种第三方模块,因此决定自己实现一个初版以后慢慢添砖加瓦。本文是对第一个版本的一点记录。
188 1
Flutter笔记:手写并发布一个人机滑动验证码插件
|
4天前
|
存储 JSON 缓存
flutter 推荐插件:path_provider
flutter 推荐插件:path_provider
78 0
|
3天前
|
XML Dart Java
Flutter插件开发之APK自动安装,字节跳动Android岗面试题
Flutter插件开发之APK自动安装,字节跳动Android岗面试题
|
3天前
|
Android开发
flutter插件市场,字节大牛耗时八个月又一力作
flutter插件市场,字节大牛耗时八个月又一力作
|
4天前
|
开发框架 前端开发 定位技术
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
【4月更文挑战第30天】Flutter插件市场和开源资源加速开发进程。pub.dev是官方插件库,提供大量第三方插件,节约时间和保证质量。选择插件时关注功能需求、评价及维护状况。开源资源作为学习、解决问题和创新的平台,需注意版权、代码质量和兼容性。案例分析展示插件应用,开源社区促进交流与技术进步,未来市场将持续发展。善用资源,提升开发效率与项目竞争力。
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
|
4天前
|
传感器 前端开发 Android开发
【Flutter 前端技术开发专栏】Flutter 中的插件开发与集成
【4月更文挑战第30天】本文探讨了Flutter插件开发的关键技术和实践,包括插件作为连接Flutter与原生功能桥梁的角色,开发流程(定义接口、实现原生代码、打包发布),以及集成方法(添加依赖、初始化)。文中提到了多媒体、传感器和文件系统等常见插件类型,并以相机插件为例说明开发步骤。此外,还强调了版本兼容性、性能优化和错误处理的注意事项,推荐了开发工具和资源。随着Flutter的发展,插件开发将更加重要,未来有望形成更丰富的生态系统。
【Flutter 前端技术开发专栏】Flutter 中的插件开发与集成
|
4天前
|
Dart Java Android开发
Flutter插件开发:开发与使用的技术解析
【4月更文挑战第26天】本文详细介绍了Flutter插件开发,包括创建插件项目、编写原生代码(Android和iOS)、注册与使用插件。通过Flutter命令行工具生成插件,使用MethodChannel进行Dart与原生平台的通信。示例展示了如何获取设备信息并展示在Flutter应用中。文章还提到插件测试与发布,强调了兼容性与性能的重要性,指出Flutter插件是扩展应用功能的关键。