在 Flutter 中打造网易云音乐般的播放界面

Android

2023-12-28 19:03:39

沉浸式音乐体验：使用 Flutter 打造网易云音乐播放界面

走进 Flutter 的世界

Flutter 作为一款跨平台移动应用程序框架，因其卓越的性能、优雅的 UI 和无与伦比的跨平台兼容性而备受推崇。在这趟旅程中，我们将利用 Flutter 的强大功能打造一个美轮美奂的网易云音乐播放界面，让用户沉醉于音乐的海洋。

播放界面的骨架

网易云音乐播放界面由几个关键元素组成：

背景图： 一幅引人入胜的图片，为界面增添视觉魅力。
黑胶唱片动画： 一个旋转的黑胶唱片，印有专辑封面，带来怀旧的音乐氛围。
播放控件： 标准的播放、暂停、下一首、上一首等控件。
歌曲信息： 当前播放歌曲的标题、艺术家和专辑信息。
进度条： 可视化地指示歌曲进度。

黑胶唱片动画：旋转的魅力

黑胶唱机动画是界面的核心元素，它营造出一种怀旧的音乐氛围。借助 Flutter 的 AnimatedBuilder 小部件和 CustomPaint，我们创造了一个旋转的黑胶唱片，上面印有专辑封面。

class RecordPlayer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: AnimationController(vsync: this, duration: Duration(seconds: 10)),
      builder: (context, child) {
        return CustomPaint(
          painter: RecordPlayerPainter(
            rotation: animation.value,
            albumArt: albumArt,
          ),
          size: Size(200, 200),
        );
      },
    );
  }
}

自定义动画：呼吸的生命

除了黑胶唱片动画，我们还运用了 TweenAnimationBuilder 添加了自定义动画，比如播放/暂停按钮的缩放动画和进度条的填充动画。这些微妙的动画为界面注入活力和交互性。

class PlayPauseButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder(
      tween: Tween<double>(begin: 0, end: 1),
      duration: Duration(milliseconds: 200),
      builder: (context, value, child) {
        return Transform.scale(
          scale: value,
          child: child,
        );
      },
      child: IconButton(
        onPressed: () {},
        icon: Icon(Icons.play_arrow),
      ),
    );
  }
}

状态管理：保持控制

为了管理界面的不同状态，我们采用了 Provider 状态管理库。它允许我们在小部件树中轻松传递数据，从而实现响应式和可维护的代码。

class PlayerState extends ChangeNotifier {
  bool isPlaying = false;

  void togglePlay() {
    isPlaying = !isPlaying;
    notifyListeners();
  }
}

页面布局：协调和谐

我们利用 Column 和 Row 小部件安排界面的元素，创建了一个结构良好且响应式的布局。MediaQuery 确保布局在各种屏幕尺寸上都能完美呈现。

class PlayerPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: BackgroundImage(),
          ),
          SizedBox(height: 20),
          RecordPlayer(),
          SizedBox(height: 20),
          SongInfo(),
          SizedBox(height: 20),
          PlayerControls(),
          SizedBox(height: 20),
          ProgressBar(),
        ],
      ),
    );
  }
}