Flutter进度指示器插件simple_progress_indicators的使用

概述

simple_progress_indicators 是一个用于显示进度或创建简单进度条动画的Flutter包。它支持实色和渐变色的进度条，并提供了几种不同类型的进度指示器。

如何使用

Linear Progress Indicator (线性进度指示器)

ProgressBar

ProgressBar 是一个基本的线性指示器小部件，可以生成带有可选背景的水平圆角矩形。

@override
Widget build(BuildContext context) {
  return const MaterialApp(
    home: Scaffold(
      body: Center(
        child: ProgressBar(
          value: 0.5,
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Colors.yellowAccent, Colors.deepOrange],
          ),
        ),
      ),
    ),
  );
}

参数：

• value：当前进度值，范围从 0.0 到 1.0
• width：进度条宽度，默认为 200.0
• height：进度条高度，默认为 10.0
• color：进度条填充颜色
• gradient：渐变填充，接受 Gradient 类
• backgroundColor：进度条背景颜色，默认为透明

注意：不能同时指定 color 和 gradient 属性。

ProgressBarAnimation

ProgressBarAnimation 是一个简单的动画进度条小部件，它会根据给定的 duration 动画化 ProgressBar 小部件。

ProgressBarAnimation(
  duration: const Duration(seconds: 2),
  gradient: const LinearGradient(
    colors: [
      Colors.blue,
      Colors.purple,
    ],
  ),
  backgroundColor: Colors.grey.withOpacity(0.4),
)

参数：

• duration：从 0% 到 100% 的动画持续时间
• width、height、color、gradient、backgroundColor 同上
• curve：动画曲线，默认为线性，可以使用 Curves 类中的其他曲线

AnimatedProgressBar

AnimatedProgressBar 是一个隐式动画小部件，它会在 value 发生变化时进行动画过渡。

AnimatedProgressBar(
  value: full ? 1.0 : 0.0,
  duration: const Duration(seconds: 3),
  gradient: const LinearGradient(
    colors: [
      Colors.amber,
      Colors.red,
    ],
  ),
  backgroundColor: Colors.grey.withOpacity(0.4),
)

参数：

• value：目标进度值，需要改变
• duration：从初始值到最终值的动画持续时间
• width、height、color、gradient、backgroundColor、curve 同上
• onEnd：动画结束时的回调函数

示例代码

以下是一个完整的示例应用，展示了如何使用 simple_progress_indicators 包中的各种进度条：

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

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

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

  @override
  State<SimpleProgressIndicatorsApp> createState() => _SimpleProgressIndicatorsAppState();
}

class _SimpleProgressIndicatorsAppState extends State<SimpleProgressIndicatorsApp> {
  bool full = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Simple Progress Indicator Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Column(
                children: [
                  const Text('ProgressBar'),
                  ProgressBar(
                    value: 0.5,
                    gradient: const LinearGradient(
                      colors: [
                        Colors.yellow,
                        Colors.red,
                      ],
                    ),
                    backgroundColor: Colors.grey.withOpacity(0.4),
                  ),
                ],
              ),
              Column(
                children: [
                  const Text('ProgressBarAnimation'),
                  ProgressBarAnimation(
                    duration: const Duration(seconds: 2),
                    gradient: const LinearGradient(
                      colors: [
                        Colors.blue,
                        Colors.purple,
                      ],
                    ),
                    backgroundColor: Colors.grey.withOpacity(0.4),
                  ),
                ],
              ),
              Column(
                children: [
                  const Text('AnimatedProgressBar'),
                  AnimatedProgressBar(
                    value: full ? 1.0 : 0.0,
                    duration: const Duration(seconds: 2),
                    gradient: const LinearGradient(
                      colors: [
                        Colors.amber,
                        Colors.red,
                      ],
                    ),
                    backgroundColor: Colors.grey.withOpacity(0.4),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      full = !full;
                      setState(() {});
                    },
                    child: Text(full ? 'To 0%' : 'To 100%'),
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

通过这个示例，您可以了解如何在Flutter应用中使用 simple_progress_indicators 包来创建不同类型的进度条。希望这对您有所帮助！