flutter如何实现音乐进度条

在Flutter中如何实现一个自定义的音乐播放进度条？我希望能够显示当前播放进度，并支持用户拖动进度条来调整播放位置。目前尝试了Slider组件但样式不太符合设计需求，想了解是否有其他更灵活的实现方式，或者如何对Slider进行深度自定义？最好能提供完整的代码示例，包括进度更新和拖动交互处理。

2 回复

在Flutter中实现音乐进度条，可以通过以下步骤：

  1. 使用Slider组件，设置min和max值（如0到歌曲总时长），通过value绑定当前播放进度。

  2. 监听进度变化：通过onChanged回调更新进度，拖动时实时调整；onChangeEnd用于确认拖动结束，同步到播放器。

  3. 结合AudioPlayer（如audioplayers包）：

    • 使用StreamBuilder监听播放位置（positionStream）和总时长（durationStream）。
    • 数据格式转换：将Duration转换为秒或毫秒。

示例代码片段：

Slider(
  min: 0,
  max: totalDuration.inSeconds.toDouble(),
  value: currentPosition.inSeconds.toDouble(),
  onChanged: (value) => setState(() => currentPosition = Duration(seconds: value.toInt())),
  onChangeEnd: (value) => audioPlayer.seek(Duration(seconds: value.toInt())),
)

优化：可自定义进度条样式（颜色、高度），或使用flutter_slider等第三方库增强交互。

更多关于flutter如何实现音乐进度条的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现音乐进度条，可以通过以下步骤完成：

1. 使用Slider组件

Slider是Material Design中的滑动条组件，适合用于进度控制。

double _currentValue = 0;
double _maxValue = 100;

Slider(
  value: _currentValue,
  max: _maxValue,
  onChanged: (value) {
    setState(() {
      _currentValue = value;
    });
  },
  onChangeEnd: (value) {
    // 用户拖动结束时，跳转到指定位置
    audioPlayer.seek(Duration(seconds: value.toInt()));
  },
)

2. 结合音频播放器

使用audioplayers包控制音频播放：

import 'package:audioplayers/audioplayers.dart';

final AudioPlayer audioPlayer = AudioPlayer();
Duration _duration = Duration.zero;
Duration _position = Duration.zero;

// 初始化监听器
void initState() {
  super.initState();
  audioPlayer.onDurationChanged.listen((Duration d) {
    setState(() => _duration = d);
  });
  audioPlayer.onPositionChanged.listen((Duration p) {
    setState(() => _position = p);
  });
}

// 进度条构建
Slider(
  value: _position.inSeconds.toDouble(),
  max: _duration.inSeconds.toDouble(),
  onChanged: (value) {
    setState(() => _position = Duration(seconds: value.toInt()));
  },
  onChangeEnd: (value) {
    audioPlayer.seek(Duration(seconds: value.toInt()));
  },
)

3. 添加时间显示

Row(
  children: [
    Text(_formatTime(_position)),
    Expanded(child: Slider(...)),
    Text(_formatTime(_duration)),
  ],
)

String _formatTime(Duration duration) {
  String twoDigits(int n) => n.toString().padLeft(2, "0");
  String twoDigitMinutes = twoDigits(duration.inMinutes.remainder(60));
  String twoDigitSeconds = twoDigits(duration.inSeconds.remainder(60));
  return "$twoDigitMinutes:$twoDigitSeconds";
}

4. 自定义样式（可选）

SliderTheme(
  data: SliderThemeData(
    trackHeight: 4,
    thumbShape: RoundSliderThumbShape(enabledThumbRadius: 8),
    overlayColor: Colors.blue.withOpacity(0.2),
  ),
  child: Slider(...),
)

完整示例要点：

  1. 使用audioplayers包管理音频
  2. 通过onDurationChanged和onPositionChanged监听时长和进度
  3. Slider的onChangeEnd用于实际跳转
  4. 使用SliderTheme自定义视觉样式

记得在pubspec.yaml中添加依赖：

dependencies:
  audioplayers: ^5.0.0

这样就能实现一个功能完整的音乐进度条，支持拖动跳转和实时更新。

回到顶部