👏 Flutter Danmaku

一个普通的flutter弹幕项目。纯dart项目

a62527776a/read-record#5 设计思路

• 👏 Flutter Danmaku
  • Features
  • live demo
  • How to use
• API
  • FlutterDanmakuArea
    • Widget child
  • FlutterDanmakuController
    • init(Size size)
    • dipose
    • addDanmaku
    • resizeArea
    • pause&play
    • changeShowArea
    • changeRate
    • changeLableSize
    • changeOpacity
    • setBulletTapCallBack
    • clearScreen
  • Tip
    • 如何seek弹幕
  • 感谢

Features

• 色彩弹幕
• 静止弹幕
• 滚动弹幕
• 底部弹幕
• 可变速
• 调整大小
• 配置透明度
• 调整展示区域
• 播放 && 暂停
• 自定义弹幕背景
• 弹幕点击回调

live demo

https://a62527776a.github.io/flutter_danmaku_demo/index.html web demo

How to use

1. Depend on it Add this to your package's pubspec.yaml file:

dependencies:
  flutter_danmaku: ^latest

2. Install it You can install packages from the command line:

with Flutter:

$ flutter pub get

3. Import it

Now in your Dart code, you can use:

import 'package:flutter_danmaku/flutter_danmaku.dart';

class _MyHomePageState extends State<MyHomePage> {
    FlutterDanmakuController flutterDanmakuController = FlutterDanmakuController();

    void addDanmaku () {
        String text = 'hello world!';
        flutterDanmakuController.
            addDanmaku(text);
    }

    // 幕布尺寸
    Size get areaSize => Size(MediaQuery.of(context).size.width, 220)

    @override
    void initState() {
        super.initState();
        // page mounted after
        Future.delayed(Duration(milliseconds: 500), () {
          // 初始化弹幕
        flutterDanmakuController.init(areaSize);
        flutterDanmakuController.addDanmaku('hello world')
        });
    }

    @override
    Widget build (BuildContext context) {
        return Stack(
            children: [
              // 比如这个是在弹幕下面的播放器
              Container(height: areaSize.height, width: areaSize.width),
              FlutterDanmakuArea(controller: flutterDanmakuController),
            ],
          ),
    }
}

API

FlutterDanmakuArea

@override
Widget build (BuildContext context) {
    return Stack(
        children: [
          // 比如这个是在弹幕下面的播放器
          Container(height: 220, width: areaSize.width),
          FlutterDanmakuArea(controller: flutterDanmakuController),
        ],
      ),
}

Widget child

将需要展示在弹幕下方的画面放进去

FlutterDanmakuController

Stack(
  children: [
    // 比如这个是在弹幕下面的播放器
    Container(height: 220, width: MediaQuery.of(context).size.width),
    FlutterDanmakuArea(controller: flutterDanmakuController),
  ],
)
// 需要在页面渲染完之后初始化
flutterDanmakuController.init(Size(MediaQuery.of(context).size.width, 220))

init(Size size)

在页面渲染之后 需要初始化的时候调用 会启动定时器渲染

Params	Type	Description	default
size	Size	初始化幕布 宽高不能用double.infinity	/

dipose

页面销毁时调用，会清空数据并且停止定时器

addDanmaku

AddBulletResBody addDanmaku(
    String text,
    {
        Color color,
        FlutterDanmakuBulletType bulletType,
        FlutterDanmakuBulletPosition position,
        int offsetMS
        Widget Function(Text) builder
    }
)

通过调用addDanmaku来将弹幕展示在屏幕上

enum AddBulletResBody {
    noSpace, // 没空间
    success // 成功
}

Params	Type	Description	default
text	String	弹幕的文字（必填	/
color	Color	弹幕的颜色	Colors.black
bulletType	FlutterDanmakuBulletType	弹幕从右边滚动到左边 或者 弹幕居中静止展示	FlutterDanmakuBulletType.scroll
position	FlutterDanmakuBulletPosition	按顺序注入弹幕 或者 只注入到底部弹幕（注入的弹幕只为静止弹幕	FlutterDanmakuBulletPosition.any
builder	Widget Function(Text)	需要自定义弹幕背景 通过编写builder函数来实现	null
offsetMS	int	弹幕偏移量	插入弹幕偏移量 用于弹幕seek 需要先清空屏幕 然后按照偏移量从大到小的顺序插入

resizeArea

void resizeArea(Size size)

Params	Type	Description	default
size	Size	改变视图尺寸并等待视图渲染完成后调用 通常用于切换全屏 宽高不能用double.infinity	/

pause&play

暂停或者播放弹幕

void pause()
void play()

Params	Type	Description	default
/	/	/	/

changeShowArea

改变显示区域百分比

void changeShowArea(double parcent)

Params	Type	Description	default
parcent	double	展示显示区域百分比 0～1	1

changeRate

改变弹幕播放速率

void changeRate(double rate)

Params	Type	Description	default
rate	double	修改弹幕播放速率，通常用于倍速播放 大于0即可 1为正常速度	1

changeLableSize

改变文字大小

void changeLableSize(int fontSize)

Params	Type	Description	default
fontSize	int	修改文字大小 会将所有弹幕文字大小调整	14

changeOpacity

改变弹幕透明度

void changeOpacity(int opacity)

Params	Type	Description	default
opacity	double	修改文字透明度 会将所有弹幕文字透明度调整 0 ～ 1	1

setBulletTapCallBack

设置子弹单击事件

void setBulletTapCallBack(Function(FlutterDanmakuBulletModel))

clearScreen

清空全部弹幕

void clearScreen()

---

---

Tip

如何seek弹幕

比如视频seek到3:10:55
需要取出3:07:55 ~ 3:10:55这三秒内的所有弹幕 按照最早到最晚的排序 调用addDanmaku 传入offsetMS参数 就能实现按照时间轴seek弹幕

  danmakuSeek() {
    // 先清空屏幕
    flutterDanmakuController.clearScreen();
    // 取出seek前3秒到seek时间区间的所有弹幕
    // 需要按照时间偏移量从早到晚排序好
    random100().forEach((randomInt) {
      addOffsetDanmaku(randomInt);
    });
  }

  List<int> random100() {
    // 模拟seek时间的毫秒偏移量
    List<int> randomList = List.generate(100, (index) => Random().nextInt(3000))..sort();
    return randomList.reversed.toList();
  }

  addOffsetDanmaku(int offsetMS) {
    int random = Random().nextInt(20);
    flutterDanmakuController.addDanmaku('s' + 's' * random, offsetMS: offsetMS, builder: (Text textWidget) {
      return Container(
        child: textWidget,
        decoration: BoxDecoration(border: Border.all(color: Colors.red)),
      );
    }, color: Colors.primaries[Random().nextInt(Colors.primaries.length)]);
  }

感谢

感谢@sxsdjkk对本项目的code review以及相关指导和修改意见。

感谢我的直属领导@银翼的魔术师。带领的团队拥有非常open的技术氛围，给予我较为宽松的技术成长环境。