Flutter歌词展示插件mmoo_lyric的使用

flutter_lyric 插件简介

flutter_lyric 是一个用于展示歌词的 Flutter 插件。它提供了丰富的配置选项，可以轻松实现歌词滚动、拖动等功能。

使用步骤

1. 添加依赖到 pubspec.yaml

在项目的 pubspec.yaml 文件中添加 flutter_lyric 依赖：

dependencies:
  flutter_lyric: ^1.0.3 # 请使用最新版本

然后执行以下命令以更新依赖：

flutter pub get

2. 创建 LyricController

LyricController 是用于控制歌词播放进度的对象。需要传入 vsync 参数以便支持动画效果。

var controller = LyricController(vsync: this);

3. 将歌词字符串转换为歌词列表

使用 LyricUtil.formatLyric 方法将歌词字符串转换为歌词列表。

// 歌词字符串
var songLyc = """
[00:00.000] 作曲 : Maynard Plant/Blaise Plant/菊池拓哉 
[00:00.226] 作词 : Maynard Plant/Blaise Plant/菊池拓哉
[00:00.680]明日を照らすよSunshine
...
""";

// 转换歌词
var lyrics = LyricUtil.formatLyric(songLyc);

4. 创建 LyricWidget

LyricWidget 是实际用于展示歌词的控件。需要传入歌词列表、歌词控制器以及其他配置项。

var lyricWidget = LyricWidget(
  size: Size(double.infinity, double.infinity), // 设置歌词区域大小
  lyrics: lyrics, // 转换后的歌词列表
  controller: controller, // 歌词控制器
);

完整示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_lyric 插件来展示歌词。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LyricPage(),
    );
  }
}

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

class _LyricPageState extends State<LyricPage> with TickerProviderStateMixin {
  late LyricController controller;
  List<LyricLine> lyrics = [];

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

    // 初始化歌词控制器
    controller = LyricController(vsync: this);

    // 定义歌词字符串
    var songLyc = """
    [00:00.000] 作曲 : Maynard Plant/Blaise Plant/菊池拓哉 
    [00:00.226] 作词 : Maynard Plant/Blaise Plant/菊池拓哉
    [00:00.680]明日を照らすよSunshine
    ...
    """;

    // 将歌词字符串转换为歌词列表
    lyrics = LyricUtil.formatLyric(songLyc);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter 歌词展示')),
      body: Center(
        child: LyricWidget(
          size: Size(double.infinity, double.infinity), // 设置歌词区域大小
          lyrics: lyrics, // 转换后的歌词列表
          controller: controller, // 歌词控制器
        ),
      ),
    );
  }
}