使用Flutter做一个音乐播放器（App）

1.查阅各种资料，了解Flutter架构以及Dart语言。

Flutter 架构体系

Dart 语言

2.根据资料内容按步骤配置环境，下载插件和组件包。

环境配置、组件下载

3.在新建的项目文件 pubspec.yaml 中添加插件包 audioplayers: ^0.20.1 ，点击 Pub get 即可完成。

添加package包

添加成功

4.在项目lib文件夹中编写代码。

AudioPlayer audioPlayer = new AudioPlayer(); //播放器对象

Duration duration = new Duration(); //Duration对象代表音乐时长

Duration position = new Duration(); //Duration对象代表音乐播放时长

bool playing = false; //bool对象-标记音乐是否在播放

///初始化播放器对象

void initPlayer() {audioPlayer = new AudioPlayer(); audioPlayer.durationHandler = (d) => setState(() { duration = d; }); audioPlayer.positionHandler = (p) => setState(() { position = p; }); } ///拖到音乐进度条 void seekToSecond(int second) { Duration newDuration = Duration(seconds: second); audioPlayer.seek(newDuration); }

///音乐进度条 Widget slider() { return Slider.adaptive( activeColor: Colors.blue, inactiveColor: Colors.orange, min: 0.0, value: position.inSeconds.toDouble(), max: duration.inSeconds.toDouble(), onChanged: (double value) { setState(() { seekToSecond(value.toInt()); value = value; }); }); }

///音乐播放器布局

Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Flutter音乐播放器"), centerTitle: true, titleSpacing: 2.0, //textTheme: TextTheme(), actions: [ Icon(Icons.share) ], ), body: Container(···) ); }

///播放按钮点击事件

PlayIconButton( iconSize: 50, iconColor: Colors.blue[600], iconBefore: Icons.pause_circle_outline, iconNext: Icons.play_circle_outline, isPlay: isPlay, onPressed: (){ isPlay=!isPlay; setState(() { if(isPlay==false){ audioCache.play(musicList[index]); } else{ _audioPlayer.pause(); } }); }, ),

5.检查项目代码是否有报错，有错误就可以根据提示进行改正。

6.选择相应的项目主文件，点击运行按钮。

运行项目

#到此，项目已经完成。

最后，我们继续学习···

Flutter学习

Dart学习