Flutter弹幕显示插件flutter_barrage的使用

flutter_barrage 是一个用于在Flutter应用中显示弹幕的插件。本文将介绍如何使用这个插件，并提供完整的示例代码。

Getting Started

BarrageWall 参数

• List<Bullet> bullets: 初始化的弹幕列表。
• BarrageWallController controller: 用于初始化后批量发送弹幕的控制器。
• ValueNotifier<BarrageValue> timelineNotifier: 用于连接媒体的当前播放进度。
• int speed: 弹幕从屏幕右侧移动到左侧的时间，默认值为5秒。
• child: 用于填充的容器。
• double width: 容器宽度。
• double height: 容器高度。
• bool massiveMode: 海量模式，默认关闭，当开启时会实时显示所有弹幕，即使通道被占用也会覆盖之前的弹幕。
• double maxBulletHeight: 弹幕的最大高度，用于计算通道，默认值为16。
• int speedCorrectionInMilliseconds: 默认值为3000，用于调整不同通道的速度，不同的通道会在这个值的范围内找到一个随机值并调整当前通道的速度。
• bool debug: 调试模式，会显示一个数据面板。
• int safeBottomHeight: 默认值为0，用于保证在最下方有一个不会显示弹幕的空间，避免挡住字幕。

示例代码

只显示弹幕

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Barrage Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Flutter Barrage Demo Page'),
    );
  }
}

final barrageWallController = BarrageWallController();

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<StatefulWidget> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    Random random = new Random();
    List<Bullet> bullets = List<Bullet>.generate(100, (i) {
      final showTime = random.nextInt(60000); // in 60s
      return Bullet(child: Text('$i-$showTime'), showTime: showTime);
    });

    return Scaffold(
        appBar: AppBar(title: Text(widget.title)),
        body: SafeArea(
            child: Stack(children: <Widget>[
          Positioned(
              top: 200,
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.width *
                      MediaQuery.of(context).size.aspectRatio +
                  200,
              child: BarrageWall(
                massiveMode: false, // disabled by default
                bullets: bullets,
                child: new Container(),
              )),
        ])));
  }
}

显示弹幕并实现发送功能

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Barrage Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Flutter Barrage Demo Page'),
    );
  }
}

final barrageWallController = BarrageWallController();

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<StatefulWidget> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    Random random = new Random();
    List<Bullet> bullets = List<Bullet>.generate(1000, (i) {
      final showTime = random.nextInt(60000); // in 60s
      return Bullet(child: Text('$i-$showTime'), showTime: showTime);
    });

    final textEditingController = TextEditingController();
    return Scaffold(
        appBar: AppBar(title: Text(widget.title)),
        body: SafeArea(
            child: Column(children: <Widget>[
          Expanded(
              flex: 9,
              child: Stack(children: <Widget>[
                Positioned(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.width *
                            MediaQuery.of(context).size.aspectRatio +
                        100,
                    child: BarrageWall(
                        debug: true,
                        safeBottomHeight:
                            60, // do not send bullets to the safe area
                        bullets: bullets,
                        child: new Container(),
                        controller: barrageWallController)),
              ])),
          Expanded(
              child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(
                      controller: textEditingController,
                      textInputAction: TextInputAction.send,
                      maxLength: 20,
                      onSubmitted: (text) {
                        textEditingController.clear();
                        barrageWallController
                            .send([new Bullet(child: Text(text))]);
                      }))),
        ])));
  }
}

通过上述示例代码，你可以轻松地在你的Flutter应用中添加弹幕显示功能。更多详细用法请查看 examples。