music_player_page 是一个用于 Flutter 的音乐播放页面插件，它可以帮助你快速构建一个功能丰富的音乐播放界面。以下是如何使用 music_player_page 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 music_player_page 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  music_player_page: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 music_player_page 插件：

import 'package:music_player_page/music_player_page.dart';

3. 使用 MusicPlayerPage

你可以直接使用 MusicPlayerPage 来创建一个音乐播放页面。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MusicPlayerPage(
        songTitle: 'Song Title',
        artist: 'Artist Name',
        albumArtUrl: 'https://example.com/album_art.jpg',
        audioUrl: 'https://example.com/audio.mp3',
      ),
    );
  }
}

4. 参数说明

MusicPlayerPage 提供了多个参数来定制音乐播放页面：

• songTitle: 歌曲标题。
• artist: 艺术家名称。
• albumArtUrl: 专辑封面的 URL。
• audioUrl: 音频文件的 URL。
• onPlay: 播放按钮点击时的回调。
• onPause: 暂停按钮点击时的回调。
• onNext: 下一首按钮点击时的回调。
• onPrevious: 上一首按钮点击时的回调。
• onSeek: 拖动进度条时的回调。

5. 自定义 UI

如果你需要自定义 UI，你可以通过 MusicPlayerPage 提供的 builder 参数来构建自己的界面：

MusicPlayerPage(
  songTitle: 'Song Title',
  artist: 'Artist Name',
  albumArtUrl: 'https://example.com/album_art.jpg',
  audioUrl: 'https://example.com/audio.mp3',
  builder: (context, state) {
    return Scaffold(
      appBar: AppBar(
        title: Text(state.songTitle),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.network(state.albumArtUrl),
            Text(state.artist),
            IconButton(
              icon: Icon(state.isPlaying ? Icons.pause : Icons.play_arrow),
              onPressed: state.isPlaying ? state.pause : state.play,
            ),
          ],
        ),
      ),
    );
  },
);

6. 控制播放

你可以通过 MusicPlayerPage 提供的 play, pause, next, previous 等方法来控制音乐的播放。

MusicPlayerPage(
  songTitle: 'Song Title',
  artist: 'Artist Name',
  albumArtUrl: 'https://example.com/album_art.jpg',
  audioUrl: 'https://example.com/audio.mp3',
  onPlay: () {
    print('Play button pressed');
  },
  onPause: () {
    print('Pause button pressed');
  },
  onNext: () {
    print('Next button pressed');
  },
  onPrevious: () {
    print('Previous button pressed');
  },
);

7. 处理状态

MusicPlayerPage 提供了 MusicPlayerState 来获取当前的播放状态，例如是否正在播放、当前播放位置等。

MusicPlayerPage(
  songTitle: 'Song Title',
  artist: 'Artist Name',
  albumArtUrl: 'https://example.com/album_art.jpg',
  audioUrl: 'https://example.com/audio.mp3',
  builder: (context, state) {
    return Scaffold(
      appBar: AppBar(
        title: Text(state.songTitle),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.network(state.albumArtUrl),
            Text(state.artist),
            Text('Position: ${state.position}'),
            Text('Duration: ${state.duration}'),
            IconButton(
              icon: Icon(state.isPlaying ? Icons.pause : Icons.play_arrow),
              onPressed: state.isPlaying ? state.pause : state.play,
            ),
          ],
        ),
      ),
    );
  },
);

8. 处理错误

你可以通过 onError 参数来处理播放过程中可能出现的错误：

MusicPlayerPage(
  songTitle: 'Song Title',
  artist: 'Artist Name',
  albumArtUrl: 'https://example.com/album_art.jpg',
  audioUrl: 'https://example.com/audio.mp3',
  onError: (error) {
    print('Error: $error');
  },
);

9. 其他功能

music_player_page 还提供了其他一些功能，例如循环播放、随机播放等。你可以通过插件的文档或源码来了解更多细节。

10. 运行项目

完成上述步骤后，你可以运行你的 Flutter 项目，查看 MusicPlayerPage 的效果。

flutter run