Flutter边框进度指示器插件border_progress_indicator的使用

Flutter边框进度指示器插件border_progress_indicator的使用

边框进度指示器 (border_progress_indicator)

这是一个小巧的包，用于在边框中显示进度。

使用方法

将您的组件包裹在 BorderProgressIndicator 中。

BorderProgressIndicator(
	borderRadius: 10,
	value: 0.6,
	color: Colors.red,
	strokeWidth: 2,
	child: YOUR WIDGET HERE
),

动画版本

您还可以使用带有动画效果的版本，通过 AnimatedBorderProgressIndicator 实现。

AnimatedBorderProgressIndicator(
	borderRadius: 10,
	value: 0.6,
	color: Colors.red,
	curve: Curves.easeInCubic,
	strokeWidth: 2,
	child: YOUR WIDGET HERE
),

完整示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 border_progress_indicator 插件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    double value = .6; // 进度值

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("${value * 100}%"), // 显示当前进度百分比
              const SizedBox(height: 24), // 添加间距
              // 正常版本
              BorderProgressIndicator(
                borderRadius: 10, // 圆角半径
                value: value, // 当前进度值
                color: Colors.red, // 进度条颜色
                strokeWidth: 2, // 进度条宽度
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.grey.withOpacity(.5), // 背景颜色
                    borderRadius: BorderRadius.circular(10), // 背景圆角
                  ),
                  width: 200, // 宽度
                  height: 50, // 高度
                  child: const Center(child: Text('正常版本')), // 显示文字
                ),
              ),
              const SizedBox(height: 24), // 添加间距
              // 自动动画版本
              AnimatedBorderProgressIndicator(
                borderRadius: 10, // 圆角半径
                value: value, // 当前进度值
                color: Colors.red, // 进度条颜色
                curve: Curves.easeInCubic, // 动画曲线
                strokeWidth: 2, // 进度条宽度
                child: SizedBox(
                  width: 200, // 宽度
                  height: 50, // 高度
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.grey.withOpacity(.5), // 背景颜色
                      borderRadius: BorderRadius.circular(10), // 背景圆角
                    ),
                    width: 200, // 宽度
                    height: 50, // 高度
                    child: const Center(child: Text('动画版本')), // 显示文字
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}