Flutter动画进度条插件flutter_animated

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

插件简介

flutter_animated_progress_indicator 是一个为 Flutter 进度条添加动画效果的插件。它允许你通过简单的配置来实现进度条的增加和减少时的动画效果。你可以使用线性进度条（AnimatedLinearProgressIndicator）和圆形进度条（AnimatedCircularProgressIndicator）。

示例效果

animateed

完整示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_animated_progress 插件来创建带有动画效果的线性和圆形进度条。

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

import 'package:flutter_animated_progress/flutter_animated_progress.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 使用 ValueNotifier 来管理进度条的值
  final ValueNotifier<double> valueNotifier = ValueNotifier(0.0);

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化时调用 changeValue 方法来改变进度条的值
    changeValue();
  }

  // 定义一个异步方法来周期性地改变进度条的值
  changeValue() async {
    // 延迟1秒后将进度条值设置为0
    await Future.delayed(
        const Duration(seconds: 1), () => valueNotifier.value = 0);
    
    // 再延迟1秒后将进度条值设置为0.5
    await Future.delayed(
        const Duration(seconds: 1), () => valueNotifier.value = 0.5);
    
    // 再延迟1秒后将进度条值设置为1
    await Future.delayed(
        const Duration(seconds: 1), () => valueNotifier.value = 1);
    
    // 递归调用 changeValue 方法，形成循环
    changeValue();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: ValueListenableBuilder(
          // 监听 valueNotifier 的变化
          valueListenable: valueNotifier,
          builder: (context, double value, child) {
            return Column(
              children: [
                // 线性进度条
                Expanded(
                  child: Center(
                    child: AnimatedLinearProgressIndicator(
                      value: value, // 当前进度
                      animationDuration: const Duration(seconds: 2), // 动画持续时间
                      minHeight: 7, // 进度条最小高度
                      valueColor: const AlwaysStoppedAnimation<Color>(Colors.red), // 进度条颜色
                      backgroundColor: Colors.grey[800], // 背景颜色
                    ),
                  ),
                ),
                // 圆形进度条
                Expanded(
                  child: Center(
                    child: AnimatedCircularProgressIndicator(
                      value: value, // 当前进度
                      animationDuration: const Duration(seconds: 2), // 动画持续时间
                      strokeWidth: 7, // 进度条宽度
                      valueColor: const AlwaysStoppedAnimation<Color>(Colors.red), // 进度条颜色
                      backgroundColor: Colors.grey[800], // 背景颜色
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

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

gougou168 1楼•1 天前

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

当然，下面是一个使用 flutter_animated_progress 插件创建动画进度条的示例代码。这个插件允许你轻松地在 Flutter 应用中创建漂亮的动画进度条。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_animated_progress: ^1.0.8  # 请根据需要替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，在你的 Dart 文件中，你可以这样使用 flutter_animated_progress 插件来创建一个简单的动画进度条：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Animated Progress Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Animated Progress Demo'),
        ),
        body: Center(
          child: AnimatedProgressIndicatorDemo(),
        ),
      ),
    );
  }
}

class AnimatedProgressIndicatorDemo extends StatefulWidget {
  @override
  _AnimatedProgressIndicatorDemoState createState() => _AnimatedProgressIndicatorDemoState();
}

class _AnimatedProgressIndicatorDemoState extends State<AnimatedProgressIndicatorDemo> with SingleTickerProviderStateMixin {
  double _progress = 0.0;

  @override
  void initState() {
    super.initState();
    _startProgress();
  }

  void _startProgress() {
    Future.delayed(Duration.zero, () async {
      setState(() {
        _progress = 0.0;
      });
      for (int i = 0; i <= 100; i += 10) {
        await Future.delayed(Duration(milliseconds: 300));
        setState(() {
          _progress = i.toDouble();
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          height: 20.0,
        ),
        Text(
          'Progress: $_progress%',
          style: TextStyle(fontSize: 20),
        ),
        SizedBox(
          height: 20.0,
        ),
        AnimatedCircularProgressIndicator(
          radius: 75.0,
          lineWidth: 7.0,
          animationDuration: 1500,
          backgroundColor: Colors.grey[200]!,
          progress: _progress / 100,
          color: Colors.blue,
        ),
        SizedBox(
          height: 20.0,
        ),
        AnimatedLinearProgressIndicator(
          animationDuration: 1500,
          height: 20.0,
          backgroundColor: Colors.grey[200]!,
          progress: _progress / 100,
          color: Colors.blue,
        ),
      ],
    );
  }
}

在这个示例中，我们创建了两个动画进度条：一个是圆形进度条 AnimatedCircularProgressIndicator，另一个是线性进度条 AnimatedLinearProgressIndicator。我们使用 _progress 变量来跟踪进度，并在 initState 方法中启动一个异步函数 _startProgress 来模拟进度更新。

AnimatedCircularProgressIndicator 接收几个参数，如 radius、lineWidth、animationDuration、backgroundColor、progress 和 color。
AnimatedLinearProgressIndicator 接收 animationDuration、height、backgroundColor、progress 和 color 等参数。

通过调用 setState 方法，我们在每次更新进度时触发 UI 的重新构建，从而显示动画效果。

希望这个示例对你有所帮助！如果你有任何其他问题，请随时提问。