Flutter如何实现进度条动画插件

在Flutter中如何实现一个自定义的进度条动画插件？我想实现一个带有渐变颜色和圆形进度指示器的动画效果，类似下载或加载时的进度展示。目前尝试过使用LinearProgressIndicator和CircularProgressIndicator，但无法满足自定义需求。请问有没有推荐的第三方插件，或者该如何通过CustomPainter来自定义绘制这样的动画效果？最好能提供具体的代码示例或实现思路。

2 回复

使用Flutter实现进度条动画插件，可通过CustomPainter自定义绘制，结合AnimationController控制动画进度。常用插件如percent_indicator或circular_countdown，也可自行封装。

更多关于Flutter如何实现进度条动画插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现进度条动画，可以使用内置组件或自定义动画控制器。以下是两种常用方法：

1. 使用内置LinearProgressIndicator（简单动画）

LinearProgressIndicator(
  value: _progress, // 0.0 ~ 1.0
  backgroundColor: Colors.grey,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)

2. 自定义动画控制器（高级动画）

class AnimatedProgressBar extends StatefulWidget {
  @override
  _AnimatedProgressBarState createState() => _AnimatedProgressBarState();
}

class _AnimatedProgressBarState extends State<AnimatedProgressBar>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(_controller)
      ..addListener(() => setState(() {}));
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 20,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Stack(
        children: [
          Container(
            width: MediaQuery.of(context).size.width * _animation.value,
            decoration: BoxDecoration(
              gradient: LinearGradient(colors: [Colors.blue, Colors.green]),
              borderRadius: BorderRadius.circular(10),
            ),
          )
        ],
      ),
    );
  }

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

关键点：

  1. 使用AnimationController控制动画时长
  2. 通过Tween定义数值变化范围
  3. addListener触发重绘更新UI
  4. 使用forward()启动动画

扩展建议：

  • 添加动画曲线（Curves）
  • 实现暂停/继续功能
  • 支持自定义颜色和样式
  • 添加进度文本显示

内置组件适合简单场景，自定义控制器可实现更复杂的动画效果。

回到顶部