Flutter动画进度条插件flutter_animated_progress_bar的使用

Animated Progress Bar 插件介绍

Animated Progress Bar 是一个用于视频或音频的动画进度条组件，它具有以下特性：

• ✅ 完全控制动画
• ✅ 高度可定制化
• ✅ 边缘不裁剪以呈现现代外观（见音频示例）
• ✅ 拇指相关组件绘制在所有组件之上，实现炫酷效果（见视频示例）

功能演示

注意：此组件本身并不播放任何媒体！

快速示例

class Example extends StatefulWidget {
  const Example({super.key});

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> with TickerProviderStateMixin {
  late final ProgressBarController _controller;

  @override
  void initState() {
    super.initState();
    _controller = ProgressBarController(vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return ProgressBar(
      controller: _controller,
      progress: const Duration(seconds: 30),
      buffered: const Duration(seconds: 35),
      total: const Duration(minutes: 1),
      onSeek: (position) {
        print('New position: $position');
      },
    );
  }
}

使用说明

初始化 ProgressBarController

首先，你需要一个 ProgressBarController 来运行动画。类似于 AnimationController，你需要传递一个 TickerProvider，这可以通过在构造函数中配置 vsync 参数来完成。

class _ExampleState extends State<Example> with TickerProviderStateMixin {...}

然后添加 ProgressBarController：

_controller = ProgressBarController(vsync: this);

接下来，添加媒体的 progress 和 total 持续时间。你还可以添加媒体的 buffered 位置。

ProgressBar(
    controller: _controller,
    progress: const Duration(seconds: 30),
    buffered: const Duration(seconds: 35),
    total: const Duration(minutes: 1),
    onSeek: (position) {
        print('New position: $position');
    },
);

不要忘记在不再需要时 dispose 控制器。

自定义 ProgressBarController

你可以通过以下方式自定义动画的持续时间：

_controller = ProgressBarController(
      vsync: this,
      barAnimationDuration: const Duration(milliseconds: 300),
      thumbAnimationDuration: const Duration(milliseconds: 200),
      waitingDuration: const Duration(seconds: 3),
    );

如果你想要更进一步，控制器提供了对动画的完全控制：

_controller.forward();                      // 展开进度条，等待然后收缩。
_controller.expandBar();                    // 展开进度条。
_controller.collapseBar();                  // 收缩进度条。
_controller.stopBarAnimation();             // 停止进度条动画，如果正在运行。

_controller.expandThumb();                  // 展开拇指。
_controller.collapseThumb();                // 收缩拇指。
_controller.stopThumbAnimation();           // 停止拇指动画，如果正在运行。

_controller.expandBar(                      // 使用自定义持续时间和曲线展开进度条。
  duration: const Duration(seconds:1),      
  curve: Curves.easeIn,
);

这些启动动画的方法返回一个 TickerFuture 对象，当动画成功完成时会完成。这意味着你可以 await 它们以确保动画完成。

进度条自定义参数

你可以通过以下参数自定义 ProgressBar：

要快速尝试所有这些功能，请查看 Playground。

示例代码

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

void main() {
  runApp(const MaterialApp(home: AnimatedProgressBarExample()));
}

class AnimatedProgressBarExample extends StatefulWidget {
  const AnimatedProgressBarExample({super.key});

  @override
  State<AnimatedProgressBarExample> createState() => _AnimatedProgressBarExampleState();
}

class _AnimatedProgressBarExampleState extends State<AnimatedProgressBarExample> with TickerProviderStateMixin {
  late final ProgressBarController _controller;

  @override
  void initState() {
    super.initState();
    _controller = ProgressBarController(vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Animated Progress Bar Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ProgressBar(
              controller: _controller,
              progress: const Duration(seconds: 30),
              buffered: const Duration(seconds: 35),
              total: const Duration(minutes: 1),
              onSeek: (position) {
                print('New position: $position');
              },
            ),
            ElevatedButton(
              onPressed: () {
                _controller.forward();
              },
              child: const Text('Start Animation'),
            ),
            ElevatedButton(
              onPressed: () {
                _controller.stopBarAnimation();
              },
              child: const Text('Stop Animation'),
            ),
          ],
        ),
      ),
    );
  }
}

以上代码展示了如何创建一个包含动画进度条的应用，并通过按钮控制动画的开始和停止。希望这对您有所帮助！如果有任何问题或建议，请随时反馈。