Flutter创意进度条插件chaotic_progress的使用

在本教程中，我们将介绍如何使用Flutter插件chaotic_progress来创建一个具有独特动画效果的创意进度条。

特性

开始使用

在你的Flutter项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  ...
  chaotic_progress: any

然后，在你的Dart文件中导入该包：

import 'package:chaotic_progress/chaotic_progress.dart';

使用

下面是一个简单的示例代码，展示如何使用ChaoticProgress插件：

import 'dart:ui';

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

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

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  var _showProgress = true;

  late final _animationController = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 5),
  )..repeat();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          const FlutterLogo(
            size: 300,
            style: FlutterLogoStyle.horizontal,
          ),
          ChaoticProgress(
            visible: _showProgress,
            // backgroundColor: Colors.white.withOpacity(0.5),
            filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
            alignCurve: Curves.linear,
            duration: const Duration(seconds: 4),
            shapeBuilder: (context, index, color, scale) => AnimatedBuilder(
              animation: _animationController,
              builder: (_, child) => Transform.rotate(
                angle: -2 * 3.1415926 * _animationController.value,
                child: child,
              ),
              child: AnimatedScale(
                scale: scale,
                duration: const Duration(seconds: 1),
                child: const Icon(
                  Icons.ac_unit,
                  color: Colors.lightBlueAccent,
                  size: 36,
                ),
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _showProgress = !_showProgress;
            _showProgress
                ? _animationController.repeat()
                : _animationController.stop(canceled: false);
          });
        },
        child: const Text('Click'),
      ),
    );
  }

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

参数说明

以下是ChaoticProgress类的所有属性及其说明：

class ChaoticProgress extends StatefulWidget {
  const ChaoticProgress({
    super.key,
    this.numberOfShapes = 75,
    this.visible = true,
    this.minShapeSize = 15.0,
    this.maxShapeSize = 40.0,
    this.minShapeOpacity = 0.5,
    this.maxShapeOpacity = 1.0,
    this.colors = const [
      Colors.redAccent,
      Colors.greenAccent,
      Colors.blueAccent,
    ],
    this.shape = BoxShape.circle,
    this.alignCurve = Curves.easeInBack,
    this.figureCurve = Curves.linearToEaseOut,
    this.duration = const Duration(milliseconds: 1500),
    this.filter,
    this.backgroundColor,
    this.shapeBuilder,
  });

  /// 显示的形状数量。
  final int numberOfShapes;

  /// 控制是否显示形状。
  final bool visible;

  /// 形状的最小大小。
  final double minShapeSize;

  /// 形状的最大大小。
  final double maxShapeSize;

  /// 形状透明度的最小值。
  ///
  /// 透明度为1.0表示完全不透明。透明度为0.0表示完全透明（即不可见）。
  final double minShapeOpacity;

  /// 形状透明度的最大值。
  ///
  /// 透明度为1.0表示完全不透明。透明度为0.0表示完全透明（即不可见）。
  final double maxShapeOpacity;

  /// 形状的形状。
  final BoxShape shape;

  /// 随机选择显示形状的颜色列表。
  final List<Color> colors;

  /// 当动画参数时应用的曲线。
  final Curve figureCurve;

  /// 当动画对齐参数时应用的曲线。
  final Curve alignCurve;

  /// 在绘制子元素之前应用于现有绘制内容的图像滤镜。
  ///
  /// 例如，可以使用[ImageFilter.blur]创建背景模糊效果。
  final ImageFilter? filter;

  /// 动画形状的对齐和大小持续时间。
  final Duration duration;

  /// 背景颜色。
  ///
  /// [backgroundColor]在形状下方绘制。
  final Color? backgroundColor;

  /// 可以返回自定义形状小部件的构建器。
  final ChaoticProgressShapeBuilder? shapeBuilder;
}