Flutter音乐播放动画指示器插件 `animated_music_indicator` 的使用

animated_music_indicator 是一个用于在Flutter应用中显示动态均衡器动画的插件，以指示音乐正在播放。该插件提供了三种不同的样式：solid、circle 和 dash，并且可以自定义动画的颜色、大小和数量等属性。

特性

你可以选择以下三种样式之一进行自定义：

solid
circle
dash

三种样式的示例

动画控制

你可以通过传递一个布尔值给 animate 参数来控制动画的播放或暂停。

动画示例

使用方法

简单示例

AnimatedMusicIndicator();

自定义示例

AnimatedMusicIndicator(
  animate: _animate,
  numberOfBars: 8,
  size: 0.50,
  backgroundColor: Colors.white,
  barStyle: BarStyle.dash,
  roundBars: false,
  colors: const [
    Colors.red,
    Colors.blue,
    Colors.green,
    Colors.black,
    Colors.greenAccent,
    Colors.purpleAccent,
    Colors.lightGreen,
    Colors.lightBlue,
  ],
)

颜色与虚线样式的示例

完整示例 Demo

下面是一个完整的示例代码，展示了如何将 AnimatedMusicIndicator 集成到你的应用中，并根据用户交互触发动画：

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

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Material(
        child: AnimatedMusicIndicatorExample(),
      ),
    ),
  );
}

class AnimatedMusicIndicatorExample extends StatefulWidget {
  const AnimatedMusicIndicatorExample({Key? key}) : super(key: key);

  [@override](/user/override)
  State<AnimatedMusicIndicatorExample> createState() => _AnimatedMusicIndicatorExampleState();
}

class _AnimatedMusicIndicatorExampleState extends State<AnimatedMusicIndicatorExample> {
  int _index = 99; // 初始化为99，避免初始动画

  void _tileTapped(int index) {
    setState(() {
      _index = index;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Music Indicator Example'),
      ),
      body: ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) => ListTile(
          leading: const Icon(Icons.audiotrack_outlined),
          onTap: () => _tileTapped(index),
          title: Text('Song ${index + 1}'),
          trailing: AnimatedMusicIndicator(
            barStyle: BarStyle.dash,
            color: Colors.orangeAccent,
            animate: index == _index,
          ),
        ),
      ),
    );
  }
}

更多关于Flutter音乐播放动画指示器插件animated_music_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

vueper 1楼•4 小时前

更多关于Flutter音乐播放动画指示器插件animated_music_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用animated_music_indicator插件的示例代码。这个插件通常用于显示音乐播放时的动画指示器。

首先，确保你已经在pubspec.yaml文件中添加了animated_music_indicator依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_music_indicator: ^最新版本号  # 请替换为实际最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter应用中，你可以这样使用AnimatedMusicIndicator：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Music Player with Animated Indicator',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MusicPlayerScreen(),
    );
  }
}

class MusicPlayerScreen extends StatefulWidget {
  @override
  _MusicPlayerScreenState createState() => _MusicPlayerScreenState();
}

class _MusicPlayerScreenState extends State<MusicPlayerScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  bool _isPlaying = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _togglePlayPause() {
    setState(() {
      _isPlaying = !_isPlaying;
      if (_isPlaying) {
        _controller.repeat(reverse: true);
      } else {
        _controller.stop();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Music Player'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedMusicIndicator(
              animation: _controller,
              playing: _isPlaying,
              size: 100,
              color: Colors.blue,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _togglePlayPause,
              child: Text(_isPlaying ? 'Pause' : 'Play'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

依赖引入：
- 在pubspec.yaml中添加animated_music_indicator依赖。
主应用入口：
- MyApp类定义了Flutter应用的基本结构和主题。
音乐播放界面：
- MusicPlayerScreen是一个有状态的Widget，用于显示和控制音乐播放。
- 使用AnimationController来控制动画的播放和暂停。
- _togglePlayPause方法用于切换播放和暂停状态，并相应地控制动画。
动画指示器：
- AnimatedMusicIndicator用于显示动画。
- animation属性绑定到AnimationController。
- playing属性表示当前是否正在播放音乐。
- size和color属性用于自定义动画指示器的大小和颜色。
播放/暂停按钮：
- ElevatedButton用于触发播放/暂停操作。

这段代码展示了如何使用animated_music_indicator插件来创建一个简单的音乐播放界面，包括一个动画指示器和一个播放/暂停按钮。你可以根据需要进一步自定义和扩展这个示例。

Flutter音乐播放动画指示器插件animated_music_indicator的使用

Flutter音乐播放动画指示器插件 animated_music_indicator 的使用