Flutter弹幕插件flutter_easy_barrage的使用

Flutter弹幕插件flutter_easy_barrage的使用

一个非常简单易用的flutter弹幕组件！

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_easy_barrage: ^x.x.x

然后执行以下命令安装依赖：

flutter pub get

2. 初始化 EasyBarrageController

创建一个 EasyBarrageController 实例，用于管理弹幕的发送和停止。

EasyBarrageController controller = EasyBarrageController();

3. 创建弹幕控件

在你的 build 方法中，创建一个 EasyBarrage 控件，并传入必要的参数。

EasyBarrage(
  controller: controller,
  randomItemSpace: false,
  duration: const Duration(milliseconds: 5300),
  width: MediaQuery.of(context).size.width,
  height: 245,
  rowNum: 3,
  originStart: 0,
  itemSpaceWidth: 45,
  direction: TransitionDirection.rtl,
  channelDelayMap: channelDelayMap,
  rowSpaceHeight: 2.5,
)

4. 发送弹幕

4.1 发送多个弹幕（List）

通过调用 controller.sendBarrage 方法发送多个弹幕。

ElevatedButton(
  child: Text("sendlist"),
  onPressed: () {
    List<BarrageItem> list = [];

    for (int i = 0; i < 5; i++) {
      double width = 80;
      double height = 80;
      if (i % 2 == 0) {
      } else {
        width = 40;
        height = 40;
      }
      list.add(BarrageItem(
        item: Container(
          alignment: Alignment.centerLeft,
          height: width,
          width: height,
          color: Colors.green,
          child: Text(
            "b11111--${i}",
            style: TextStyle(fontSize: 10, decoration: TextDecoration.none),
          ),
        ),
        itemWidth: width,
      ));
      print("list0  i:$i ,va:${i % 2} width:$width, height:$height");
    }

    controller.sendBarrage([...list]);
  },
)

4.2 发送单个弹幕

通过调用 controller.sendBarrage 方法发送单个弹幕。

ElevatedButton(
  child: Text("sendSingle"),
  onPressed: () {
    double width = 80;
    double height = 80;

    controller.sendBarrage([
      BarrageItem(
        item: Container(
          alignment: Alignment.centerLeft,
          height: width,
          width: height,
          color: Colors.green,
          child: Text(
            "b--single",
            style: TextStyle(fontSize: 10, decoration: TextDecoration.none),
          ),
        ),
        itemWidth: width,
      )
    ]);
  },
)

4.3 发送多个弹幕组（Map）

通过调用 controller.sendChannelMapBarrage 方法发送多个弹幕组。

ElevatedButton(
  child: Text("sendMap"),
  onPressed: () {
    HashMap<int, List<BarrageItem>> mapItems = HashMap<int, List<BarrageItem>>();
    List<BarrageItem> list0 = [];

    for (int i = 0; i < 5; i++) {
      double width = 80;
      double height = 80;
      if (i % 2 == 0) {
      } else {
        width = 40;
        height = 40;
      }
      list0.add(BarrageItem(
        item: Container(
          alignment: Alignment.centerLeft,
          height: width,
          width: height,
          color: Colors.green,
          child: Text(
            "a11111--${i}",
            style: TextStyle(fontSize: 10, decoration: TextDecoration.none),
          ),
        ),
        itemWidth: width,
      ));
      print("list0  i:$i ,va:${i % 2} width:$width, height:$height");
    }

    mapItems.putIfAbsent(0, () => list0);

    List<BarrageItem> list1 = [];
    for (int i = 0; i < 5; i++) {
      double width = 80;
      double height = 80;
      if (i % 2 == 0) {
        width = 40;
        height = 40;
      } else {}
      list1.add(BarrageItem(
        item: Container(
          alignment: Alignment.centerLeft,
          height: width,
          width: height,
          color: Colors.green,
          child: Text(
            "a11111--${i}",
            style: TextStyle(fontSize: 10, decoration: TextDecoration.none),
          ),
        ),
        itemWidth: width,
      ));
    }
    mapItems.putIfAbsent(1, () => list1);

    List<BarrageItem> list2 = [];
    for (int i = 0; i < 5; i++) {
      double width = 80;
      double height = 80;
      if (i % 2 == 0) {
      } else {
        width = 40;
        height = 40;
      }
      list2.add(BarrageItem(
        item: Container(
          alignment: Alignment.center,
          height: width,
          width: height,
          color: Colors.green,
          child: Text(
            "$width x $height === ${i}",
            style: TextStyle(fontSize: 10, decoration: TextDecoration.none),
          ),
        ),
        itemWidth: width,
      ));
    }
    mapItems.putIfAbsent(2, () => list2);

    controller.sendChannelMapBarrage(mapItems);
  },
)

5. 控制弹幕速度

可以通过 updateSpeed 方法动态调整弹幕的速度。

controller.updateSpeed(Duration(seconds: 3));

完整示例代码

import 'dart:collection';

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:flutter_easy_barrage/barrage/flutter_easy_barrage.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';

  EasyBarrageController controller = EasyBarrageController();

  Map<int, Duration> channelDelayMap = HashMap();

  [@override](/user/override)
  void initState() {
    super.initState();
    controller.updateSpeed(Duration(seconds: 3));
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      // platformVersion =
      //     await _flutterEasyBarragePlugin.getPlatformVersion() ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return;

    setState(() {
      // _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Column(
          children: [
            EasyBarrage(
              controller: controller,
              randomItemSpace: false,
              duration: const Duration(milliseconds: 5300),
              width: MediaQuery.of(context).size.width,
              height: 245,
              rowNum: 3,
              originStart: 0,
              itemSpaceWidth: 45,
              direction: TransitionDirection.rtl,
              channelDelayMap: channelDelayMap,
              rowSpaceHeight: 2.5,
            ),

            Row(
              children: [
                ElevatedButton(
                  child: Text("sendMap"),
                  onPressed: () {
                    HashMap<int, List<BarrageItem>> mapItems = HashMap<int, List<BarrageItem>>();
                    List<BarrageItem> list0 = [];

                    for (int i = 0; i < 5; i++) {
                      double width = 80;
                      double height = 80;
                      if (i % 2 == 0) {
                      } else {
                        width = 40;
                        height = 40;
                      }
                      list0.add(BarrageItem(
                        item: Container(
                          alignment: Alignment.centerLeft,
                          height: width,
                          width: height,
                          color: Colors.green,
                          child: Text(
                            "a11111--${i}",
                            style: TextStyle(fontSize: 10, decoration: TextDecoration.none),
                          ),
                        ),
                        itemWidth: width,
                      ));
                      print("list0  i:$i ,va:${i % 2} width:$width, height:$height");
                    }

                    mapItems.putIfAbsent(0, () => list0);

                    List<BarrageItem> list1 = [];
                    for (int i = 0; i < 5; i++) {
                      double width = 80;
                      double height = 80;
                      if (i % 2 == 0) {
                        width = 40;
                        height = 40;
                      } else {}
                      list1.add(BarrageItem(
                        item: Container(
                          alignment: Alignment.centerLeft,
                          height: width,
                          width: height,
                          color: Colors.green,
                          child: Text(
                            "a11111--${i}",
                            style: TextStyle(fontSize: 10, decoration: TextDecoration.none),
                          ),
                        ),
                        itemWidth: width,
                      ));
                    }
                    mapItems.putIfAbsent(1, () => list1);

                    List<BarrageItem> list2 = [];
                    for (int i = 0; i < 5; i++) {
                      double width = 80;
                      double height = 80;
                      if (i % 2 == 0) {
                      } else {
                        width = 40;
                        height = 40;
                      }
                      list2.add(BarrageItem(
                        item: Container(
                          alignment: Alignment.center,
                          height: width,
                          width: height,
                          color: Colors.green,
                          child: Text(
                            "$width x $height === ${i}",
                            style: TextStyle(fontSize: 10, decoration: TextDecoration.none),
                          ),
                        ),
                        itemWidth: width,
                      ));
                    }
                    mapItems.putIfAbsent(2, () => list2);

                    controller.sendChannelMapBarrage(mapItems);
                  },
                ),
                SizedBox(
                  width: 10,
                ),
                ElevatedButton(
                  child: Text("sendlist"),
                  onPressed: () {
                    List<BarrageItem> list = [];

                    for (int i = 0; i < 5; i++) {
                      double width = 80;
                      double height = 80;
                      if (i % 2 == 0) {
                      } else {
                        width = 40;
                        height = 40;
                      }
                      list.add(BarrageItem(
                        item: Container(
                          alignment: Alignment.centerLeft,
                          height: width,
                          width: height,
                          color: Colors.green,
                          child: Text(
                            "b11111--${i}",
                            style: TextStyle(fontSize: 10, decoration: TextDecoration.none),
                          ),
                        ),
                        itemWidth: width,
                      ));
                      print("list0  i:$i ,va:${i % 2} width:$width, height:$height");
                    }

                    controller.sendBarrage([...list]);
                  },
                ),
                SizedBox(
                  width: 10,
                ),
                ElevatedButton(
                  child: Text("sendSingle"),
                  onPressed: () {
                    double width = 80;
                    double height = 80;

                    controller.sendBarrage([
                      BarrageItem(
                        item: Container(
                          alignment: Alignment.centerLeft,
                          height: width,
                          width: height,
                          color: Colors.green,
                          child: Text(
                            "b--single",
                            style: TextStyle(fontSize: 10, decoration: TextDecoration.none),
                          ),
                        ),
                        itemWidth: width,
                      )
                    ]);
                  },
                ),
              ],
            ),
            Center(
              child: Text('Running on: $_platformVersion\n'),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter弹幕插件flutter_easy_barrage的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter弹幕插件flutter_easy_barrage的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_easy_barrage 是一个用于在 Flutter 应用中实现弹幕功能的插件。它允许你在应用中轻松地展示弹幕效果，类似于视频网站上的弹幕功能。以下是如何使用 flutter_easy_barrage 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_easy_barrage 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_easy_barrage: ^latest_version

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 flutter_easy_barrage 包：

import 'package:flutter_easy_barrage/flutter_easy_barrage.dart';

3. 使用 EasyBarrage 组件

EasyBarrage 是 flutter_easy_barrage 提供的主要组件，用于展示弹幕。你可以在你的 UI 中使用它。

class BarragePage extends StatefulWidget {
  [@override](/user/override)
  _BarragePageState createState() => _BarragePageState();
}

class _BarragePageState extends State<BarragePage> {
  final _controller = BarrageController();

  [@override](/user/override)
  void initState() {
    super.initState();
    _startBarrage();
  }

  void _startBarrage() {
    Future.delayed(Duration(seconds: 1), () {
      _controller.add(BarrageItem(text: 'Hello, World!'));
      _startBarrage();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Easy Barrage'),
      ),
      body: EasyBarrage(
        controller: _controller,
        speed: 10.0, // 弹幕速度
        maxLines: 3, // 最大行数
        fontSize: 16.0, // 字体大小
        textColor: Colors.white, // 字体颜色
        backgroundColor: Colors.black.withOpacity(0.5), // 背景颜色
      ),
    );
  }
}

4. 控制弹幕

你可以通过 BarrageController 来控制弹幕的添加、暂停、继续等操作。

  • 添加弹幕：使用 _controller.add(BarrageItem(text: '弹幕内容')) 来添加一条弹幕。
  • 暂停弹幕：使用 _controller.pause() 来暂停弹幕的滚动。
  • 继续弹幕：使用 _controller.resume() 来继续弹幕的滚动。
  • 清空弹幕：使用 _controller.clear() 来清空所有弹幕。

5. 自定义弹幕样式

你可以通过 BarrageItem 来自定义每条弹幕的样式，例如字体大小、颜色、背景颜色等。

_controller.add(BarrageItem(
  text: 'Custom Barrage',
  fontSize: 20.0,
  textColor: Colors.red,
  backgroundColor: Colors.yellow,
));

6. 处理弹幕事件

你可以通过 onTap 回调来处理弹幕的点击事件。

_controller.add(BarrageItem(
  text: 'Clickable Barrage',
  onTap: () {
    print('Barrage clicked!');
  },
));

7. 销毁控制器

在页面销毁时，记得销毁 BarrageController 以释放资源。

[@override](/user/override)
void dispose() {
  _controller.dispose();
  super.dispose();
}

8. 完整示例

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

import 'package:flutter/material.dart';
import 'package:flutter_easy_barrage/flutter_easy_barrage.dart';

class BarragePage extends StatefulWidget {
  [@override](/user/override)
  _BarragePageState createState() => _BarragePageState();
}

class _BarragePageState extends State<BarragePage> {
  final _controller = BarrageController();

  [@override](/user/override)
  void initState() {
    super.initState();
    _startBarrage();
  }

  void _startBarrage() {
    Future.delayed(Duration(seconds: 1), () {
      _controller.add(BarrageItem(text: 'Hello, World!'));
      _startBarrage();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Easy Barrage'),
      ),
      body: EasyBarrage(
        controller: _controller,
        speed: 10.0,
        maxLines: 3,
        fontSize: 16.0,
        textColor: Colors.white,
        backgroundColor: Colors.black.withOpacity(0.5),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

void main() {
  runApp(MaterialApp(
    home: BarragePage(),
  ));
}
回到顶部