Flutter进度条展示插件square_progress_bar的使用

Square progress bar 是一个功能丰富的Flutter插件，它允许开发者创建动态、可定制的进度条。下面是如何在你的Flutter项目中安装和使用 square_progress_bar 的指南。

特性

• 动态大小调整
• 动画进度条
• 渐变色进度条
• 进度条端点形状自定义
• 从右向左(RTL)支持
• ✨魔法✨

安装

在你的 pubspec.yaml 文件中添加如下依赖：

dependencies:
  square_progress_bar: ^1.1.1

然后运行 flutter pub get 来安装这个包。

开始使用

只需提供0.0到1.0范围内的进度值即可开始使用。

使用方法

以下是一个完整的示例，展示了如何使用 SquareProgressBar 小部件：

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // The progress value needs to be in a range from 0.0 to 1.0
  double _progress = 0.0;
  // The percentage label range is from 0 to 100, By multiply _progress by 100.
  String _percentageLabel = "0%";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Square Progress Bar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SizedBox(
          width: double.infinity,
          height: double.infinity,
          child: Stack(
            alignment: Alignment.center,
            children: [
              SquareProgressBar(
                width: 100, // 默认：最大可用空间
                height: 100, // 默认：最大可用空间
                progress: _progress, // 提供0.0到1.0范围内的进度
                isAnimation: false, // 默认：false，是否动画显示进度
                solidBarColor: Colors.amber, // 默认：蓝色，主进度条颜色
                emptyBarColor: Colors.orange.withOpacity(0.2), // 默认：灰色，空进度条颜色
                strokeWidth: 20, // 默认：15，进度条宽度
                barStrokeCap: StrokeCap.round, // 默认：StrokeCap.round，进度条端点形状
                isRtl: false, // 默认：false，进度条起始位置
                gradientBarColor: const LinearGradient(
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                  colors: <Color>[Colors.red, Colors.amber],
                  tileMode: TileMode.repeated,
                ), // 默认：null，如果传递了渐变颜色，则会用作主进度条的颜色
                child: Center(
                  child: Text(
                    _percentageLabel,
                    style: const TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
              ),
              Positioned(
                bottom: 20,
                child: Slider(
                  min: 0.0,
                  max: 1.0,
                  activeColor: Colors.orange,
                  inactiveColor: Colors.orange.withOpacity(0.2),
                  thumbColor: Colors.orange,
                  value: _progress,
                  onChanged: (value) {
                    setState(() {
                      _progress = value;
                      final int percentage = (_progress * 100).toInt();
                      _percentageLabel = "$percentage%";
                    });
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

这段代码展示了如何结合 Slider 控件来动态更新 SquareProgressBar 的进度，并通过文本显示当前的百分比。希望这对您有所帮助！