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

发布于 1周前 作者 vueper 来自 Flutter

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

加载数据更美观。

安装

您只需在 pubspec.yaml 文件中添加 animated_progress 作为依赖项。

dependencies:
  animated_progress: ^0.0.1

开始使用

您可以使用的所有功能：

如何使用

圆形进度条

AnimatedProgress().circular(
  isSpining: true, // 是否显示旋转效果
  value: .5, // 进度值，默认为0.5
  backgroundColor: Colors.green.shade100, // 背景颜色
  valueColor: Colors.green.shade900, // 进度条颜色
),

圆形进度条带辅助线

AnimatedProgress().circular(
  isSpining: true,
  value: .5, // 进度值，默认为0.5
  valueColor: Colors.green.shade900, // 进度条颜色
  secondaryWidth : 5, // 辅助线宽度
  secondaryColor : Colors.green.shade500, // 辅助线颜色
),

其他圆形进度条特性

spinDuration  // 动画持续时间
backgroundBorder // 可以自定义边框
backgroundShape // 背景形状：BoxShape.rectangle
backgroundRadius // 此功能仅适用于 BoxShape.rectangle

线性进度条

AnimatedProgress().linear(
  height: 10, // 高度
  width: MediaQuery.of(context).size.width, // 宽度
  value: .5, // 进度值，默认为0.5
  valueColor: Colors.green.shade900, // 进度条颜色
  backgroundColor: Colors.green.shade100, // 背景颜色
),

带辅助值的线性进度条

AnimatedProgress().linear(
  height: 10, // 高度
  width: MediaQuery.of(context).size.width * .8, // 宽度
  value: .5, // 进度值，默认为0.5
  valueColor: Colors.green.shade900, // 进度条颜色
  backgroundColor: Colors.green.shade100, // 背景颜色
  secondaryValue: .7, // 辅助进度值，默认为0
  secondaryValueColor: fgColor.withAlpha(100), // 辅助进度条颜色
),

其他线性进度条特性

boxShadow  // 可以设置阴影
border // 可以自定义边框
valueAnimationDuration // 动画持续时间
direction // 使用 LinearDirection.leftToRight 或 LinearDirection.rightToLeft

完整示例Demo

以下是一个完整的示例，展示了如何在 Flutter 应用程序中使用 animated_progress 插件来创建一个圆形和线性进度条。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Progress Bar Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 圆形进度条
              AnimatedProgress().circular(
                isSpining: true,
                value: .5,
                backgroundColor: Colors.green.shade100,
                valueColor: Colors.green.shade900,
              ),
              SizedBox(height: 20),
              // 线性进度条
              AnimatedProgress().linear(
                height: 10,
                width: MediaQuery.of(context).size.width * 0.8,
                value: .5,
                valueColor: Colors.green.shade900,
                backgroundColor: Colors.green.shade100,
                secondaryValue: .7,
                secondaryValueColor: Colors.green.shade500,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


animated_progress 是一个用于 Flutter 的简单动画进度条插件，它可以轻松地在应用程序中创建具有动画效果的进度条。以下是 animated_progress 的基本使用方法。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 animated_progress 依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_progress: ^1.0.0

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

2. 基本使用

在你的 Flutter 项目中，你可以通过以下方式使用 AnimatedProgress 组件：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _progress = 0.0;

  void _increaseProgress() {
    setState(() {
      _progress += 0.1;
      if (_progress > 1.0) {
        _progress = 1.0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Progress Bar Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedProgress(
              value: _progress,
              backgroundColor: Colors.grey[300],
              valueColor: Colors.blue,
              height: 20.0,
              duration: Duration(milliseconds: 500),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _increaseProgress,
              child: Text('Increase Progress'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 参数说明

AnimatedProgress 组件的主要参数如下：

  • value: 进度条的值，范围在 0.0 到 1.0 之间。
  • backgroundColor: 进度条的背景颜色。
  • valueColor: 进度条的前景色（即进度条的颜色）。
  • height: 进度条的高度。
  • duration: 进度条动画的持续时间。

4. 自定义样式

你可以根据需要自定义进度条的样式。例如，你可以使用 borderRadius 参数来设置进度条的圆角：

AnimatedProgress(
  value: _progress,
  backgroundColor: Colors.grey[300],
  valueColor: Colors.blue,
  height: 20.0,
  borderRadius: BorderRadius.circular(10.0),
  duration: Duration(milliseconds: 500),
);
回到顶部