Flutter弹幕插件flutter_barrage_craft的使用

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](/user/override)
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    setState(() {
      controller.init(Size(MediaQuery.of(context).size.width, 300));
    });
  });
}

添加弹幕

你可以通过 addBarrage 方法将任何正常渲染的小部件添加到弹幕队列中。

方法一：手动计算小部件大小

推荐选择这种方法，因为它减少了传递给小部件的构建次数，并提供了性能提升。

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),
);

方法二：未约束小部件大小

如果无法确定小部件的大小，可以交给 flutter_barrage_craft 计算。

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的浮点数即可改变弹幕的运动速度。

controller.changeBarrageRate(3.0); // 加快三倍
controller.changeBarrageRate(1.0); // 恢复原速

播放/暂停弹幕

播放

controller.play();

暂停

controller.pause();

暂停/播放单个弹幕

controller.setBarrageTapCallBack((value) {
  setState(() {
    value.pause = !value.pause;
  });
});

示例 Demo

以下是一个完整的示例代码，展示了如何使用 flutter_barrage_craft 插件：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_barrage_craft/flutter_barrage_craft.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Barrage Craft',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  BarrageController controller = BarrageController();

  [@override](/user/override)
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        controller.init(Size(MediaQuery.of(context).size.width, 300));
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Barrage Craft'),
      ),
      body: SizedBox(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            const Padding(
              padding: EdgeInsets.symmetric(vertical: 12),
              child: Text(
                "Barrage Demo",
                style: TextStyle(fontSize: 20),
              ),
            ),
            Container(
              height: 300,
              decoration: const BoxDecoration(color: Colors.black),
              child: Stack(
                children: [
                  BarrageView(controller: controller),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
              child: Wrap(
                alignment: WrapAlignment.start,
                spacing: 12,
                runSpacing: 10,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      controller.pause();
                    },
                    child: const Text("Pause"),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      controller.play();
                    },
                    child: const Text("Play"),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      controller.changeBarrageRate(3);
                    },
                    child: const Text("Speed 🍖"),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      controller.changeBarrageRate(1);
                    },
                    child: const Text("Speed 🥝"),
                  ),
                  ElevatedButton(
                    onPressed: () async {
                      controller.addBarrage(
                        barrageWidget: const Text(
                          "Test Barrage",
                          style: TextStyle(fontSize: 14, color: Colors.white),
                        ),
                        context: context,
                      );
                    },
                    child: const Text("Add Barrage"),
                  ),
                  ElevatedButton(
                    onPressed: () async {
                      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,
                      );
                    },
                    child: const Text("Add Box Barrage"),
                  ),
                  ElevatedButton(
                    onPressed: () async {
                      controller.addBarrage(
                        barrageWidget: Image.asset(
                          "assets/app.png",
                          width: 200,
                          height: 100,
                        ),
                        context: context,
                      );
                    },
                    child: const Text("Add Image Barrage"),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}