5天时间用flutter写的网易云demo，高手才能做到的逆天操作！

2023-11-29 03:40:04

五天时间从零开始使用Flutter写了一个网易云音乐的demo，不得不说，Flutter真的是一个非常强大的跨平台开发框架，开发效率非常高。

在开始写demo之前，我花了半天时间学习Flutter的基础知识，包括语言特性、框架结构、组件使用等。然后，我根据网易云音乐的界面和功能，设计了一个简单的demo结构。

- main.dart：应用程序的入口文件，负责初始化应用程序并加载主界面。
- home_page.dart：主界面文件，负责显示前50个歌手的推荐和前50个歌手的音乐。
- player_page.dart：播放界面文件，负责音乐播放、旋转动画和歌词同步。

在实现每个界面的过程中，我遇到了很多问题，但好在Flutter的文档和社区都很完善，我都能很快找到解决方案。

比如，在实现音乐播放功能时，我遇到了一个问题：如何让音乐在离开页面时自动停止播放。我查阅了Flutter的文档，发现可以使用AudioPlayer插件来实现这个功能。

void dispose() {
  _audioPlayer.stop();
  super.dispose();
}

这个代码的意思是，在页面销毁时，停止音乐播放。

又如，在实现歌词同步功能时，我遇到了另一个问题：如何让歌词随音乐进度自动滚动。我查阅了Flutter的文档，发现可以使用Ticker和Tween来实现这个功能。

final Ticker _ticker = Ticker(_onTick);

void _onTick(Duration elapsedTime) {
  setState(() {
    _lyricsPosition = _lyricsTween.evaluate(
      elapsedTime / _duration,
    );
  });
}

final Tween<double> _lyricsTween = Tween(
  begin: 0.0,
  end: 1.0,
);

这个代码的意思是，创建一个Ticker对象，每隔一段时间调用_onTick方法，更新歌词的位置。

经过五天的努力，我终于完成了这个网易云音乐的demo。这个demo虽然很简单，但它让我对Flutter有了更深入的了解，也让我对Flutter的开发能力有了更多的信心。

以下是我的一些心得体会：