lyric_reader

Feature

• highlight(enhanced&normal)
• translation lyrics
• smooth animation
• custom UI,Parse
• line tap callback (onTapLine)
• line hover highlight (hoverColor / hoverOpacity / onHoverLineChanged)
• ripple on tap (rippleColor / rippleOpacity / ripple durations, clipped to the line rect)
• hit-testing & line rect API (getLineIndexAtY / getLineRectAt / computeLineHeight)

Show

1.😊example on web

🇨🇳chinaexample on web

2.download example apk:

Android MacOS

3.run example

Use

view example

Interactive extensions (since v0.5.0)

LyricsReader(
  model: model,
  position: position,
  playing: playing,
  lyricUi: lyricUi,
  // 点击歌词行: 行索引 + 该行开始时间
  onTapLine: (index, startTime) {
    // seek(startTime) 等
  },
  // hover 行背景 (null = 不显示)
  hoverColor: Colors.white,
  hoverOpacity: 0.08,
  // hover 行变化回调 (index = -1 表示移出)
  onHoverLineChanged: (index) {},
  // 点击涟漪 (null = 不显示), 裁剪在行框内 (InkWell 风格)
  rippleColor: Colors.black,
  rippleOpacity: 0.25,
  rippleExpandDuration: Duration(milliseconds: 600), // 按住期间持续扩散
  rippleFinishDuration: Duration(milliseconds: 150), // 抬起加速补完
  rippleFadeDuration: Duration(milliseconds: 300),   // 淡出
  // 行框/布局
  cornerRadius: 8,        // 行框圆角
  lineLeftPadding: 12,    // 左对齐时行内左边距
  lineRectPadding: 12,    // 行框上下边距
)

Layout/hit-testing extension points (available on LyricsReaderPaint):

• int getLineIndexAtY(double y, Size size) — 返回点击位置对应的行索引, 与绘制定位完全一致 (含滚动偏移)
• RRect getLineRectAt(int index, Size size) — 某行 hover/涟漪框位置
• double computeLineHeight(int index, LyricsLineModel element) — 行绘制高度

Getting Started

This project is a starting point for a Flutter plug-in package, a specialized package that includes platform-specific implementation code for Android and/or iOS.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Thanks

boyan01/flutter-netease-music