Flutter进度条边框自定义插件progress_border的使用

ProgressBorder

ProgressBorder 是一个类似于 BoxBorder 的边框，但它可以根据进度绘制部分边框，支持圆形、矩形等形状。

功能特性

✅ 绘制部分边框
✅ 支持圆形和矩形
✅ 支持背景边框
🚧 路径度量缓存（PathMetric cache）
🚧 自定义绘制（Custom Paint）

预览

ProgressBorder

快速开始

要开始使用 progress_border 插件，请在您的项目中添加依赖：

flutter pub add progress_border

如果您使用的Flutter版本低于3.7，请指定版本号为0.0.x。

使用示例

下面是一个完整的示例代码，展示了如何使用 ProgressBorder 插件来创建带有进度条边框的控件。

示例代码

import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:progress_border/progress_border.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ProgressBorder Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'ProgressBorder Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late final animationController = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 10),
  );
  double borderWidth = 8;

  @override
  void initState() {
    super.initState();
    animationController.addListener(() {
      setState(() {});
    });
    animationController.forward();
  }

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

  void restart() {
    if (animationController.status == AnimationStatus.forward ||
        animationController.value >= 1) {
      animationController.reverse();
    } else {
      animationController.forward();
    }
  }

  Widget createSquare(
    double strokeAlign,
    String text, {
    Color? backgroundColor,
    Gradient? backgroundGradient,
    Gradient? gradient,
    BoxShape shape = BoxShape.circle,
    BorderRadiusGeometry? borderRadius,
    bool clockwise = true,
  }) {
    return Container(
      width: 100,
      height: 100,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.blue.withAlpha(100),
        shape: shape,
        borderRadius: borderRadius,
        border: ProgressBorder.all(
          color: Colors.blue,
          width: borderWidth,
          progress: animationController.value,
          strokeAlign: strokeAlign,
          backgroundColor: backgroundColor,
          backgroundGradient: backgroundGradient,
          gradient: gradient,
          clockwise: clockwise,
        ),
      ),
      child: Text(text),
    );
  }

  Widget createRow({
    Color? backgroundColor,
    Gradient? backgroundGradient,
    Gradient? gradient,
    BoxShape shape = BoxShape.circle,
    BorderRadiusGeometry? borderRadius,
    bool clockwise = true,
  }) {
    return Row(
      children: [
        Expanded(
          child: Center(
            child: createSquare(
              BorderSide.strokeAlignInside,
              'Inside',
              backgroundColor: backgroundColor,
              backgroundGradient: backgroundGradient,
              gradient: gradient,
              shape: shape,
              borderRadius: borderRadius,
              clockwise: clockwise,
            ),
          ),
        ),
        Expanded(
          child: Center(
            child: createSquare(
              BorderSide.strokeAlignCenter,
              'Center',
              backgroundColor: backgroundColor,
              backgroundGradient: backgroundGradient,
              gradient: gradient,
              shape: shape,
              borderRadius: borderRadius,
              clockwise: clockwise,
            ),
          ),
        ),
        Expanded(
          child: Center(
            child: createSquare(
              BorderSide.strokeAlignOutside,
              'Outside',
              backgroundColor: backgroundColor,
              backgroundGradient: backgroundGradient,
              gradient: gradient,
              shape: shape,
              borderRadius: borderRadius,
              clockwise: clockwise,
            ),
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            const Padding(
              padding: EdgeInsets.only(top: 16, bottom: 8),
              child: Text('BoxShape.circle'),
            ),
            createRow(),
            const SizedBox(height: 20),
            createRow(
              gradient: SweepGradient(
                transform: const GradientRotation(-math.pi / 2 - 0.1),
                colors: [Colors.blue[200]!, Colors.blue],
              ),
              backgroundGradient: const SweepGradient(
                transform: GradientRotation(-math.pi / 2),
                colors: [Colors.black26, Colors.black87],
                stops: [0, 0.95],
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(top: 16, bottom: 8),
              child: Text('BoxShape.rectangle(RRect)'),
            ),
            createRow(
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(16),
              clockwise: false,
            ),
            const SizedBox(height: 20),
            createRow(
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(16),
              backgroundColor: Colors.black38,
              clockwise: false,
            ),
            const Padding(
              padding: EdgeInsets.only(top: 16, bottom: 8),
              child: Text('BoxShape.rectangle(Rect)'),
            ),
            createRow(
              shape: BoxShape.rectangle,
            ),
            const SizedBox(height: 20),
            createRow(
              shape: BoxShape.rectangle,
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomCenter,
                colors: [Colors.blue[200]!, Colors.blue],
              ),
              backgroundGradient: const LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomCenter,
                colors: [Colors.black26, Colors.black54],
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(top: 16, bottom: 8),
              child: Text('Normal border'),
            ),
            Row(
              children: [
                Expanded(
                  child: Center(
                    child: Container(
                      width: 100,
                      height: 100,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: Colors.blue.withAlpha(100),
                        borderRadius: BorderRadius.circular(16),
                        border: Border.all(
                          color: Colors.blue,
                          width: borderWidth,
                        ),
                      ),
                      child: const Text('Inside with background'),
                    ),
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Container(
                      width: 100,
                      height: 100,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: Colors.blue.withAlpha(100),
                        borderRadius: BorderRadius.circular(16),
                        border: Border.all(
                          color: Colors.blue,
                          width: borderWidth,
                          strokeAlign: BorderSide.strokeAlignCenter,
                        ),
                      ),
                      child: const Text('Center with background'),
                    ),
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Container(
                      width: 100,
                      height: 100,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: Colors.blue.withAlpha(100),
                        borderRadius: BorderRadius.circular(16),
                        border: Border.all(
                          color: Colors.blue,
                          width: borderWidth,
                          strokeAlign: BorderSide.strokeAlignOutside,
                        ),
                      ),
                      child: const Text('Outside with background'),
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 20),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: restart,
        tooltip: 'start',
        child: const Icon(Icons.refresh),
      ),
      bottomNavigationBar: BottomAppBar(
        height: kBottomNavigationBarHeight,
        child: Row(
          children: [
            const SizedBox(width: 16),
            const Text('BorderWidth:'),
            Expanded(
              child: Slider(
                value: borderWidth,
                min: 0.5,
                max: 50,
                onChanged: (v) {
                  setState(
                    () {
                      borderWidth = v;
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解释

导入库：首先导入必要的库，包括 progress_border。
主应用入口：MyApp 是应用程序的入口点，设置了主题并导航到主页。
主页状态管理：MyHomePage 是一个有状态的Widget，使用 SingleTickerProviderStateMixin 来管理动画控制器。
动画控制器：AnimationController 用于控制进度条的动画，通过监听其值的变化来更新UI。
创建带进度条的控件：createSquare 方法创建了一个带有 ProgressBorder 的 Container，并根据传入的参数调整边框样式。
布局：createRow 方法创建了一行包含多个 createSquare 控件的布局。
交互元素：底部有一个 FloatingActionButton 用于重启动画，底部导航栏包含一个滑块用于调整边框宽度。

通过这个示例，您可以更好地理解如何使用 progress_border 插件来创建带有进度条边框的控件，并根据需要进行自定义。

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

bupafengyu 1楼•2 天前

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

当然，以下是如何在Flutter中使用progress_border插件来自定义进度条边框的示例代码。假设你已经在pubspec.yaml文件中添加了progress_border依赖并运行了flutter pub get。

1. 添加依赖

首先，确保你的pubspec.yaml文件中包含以下依赖：

dependencies:
  flutter:
    sdk: flutter
  progress_border: ^最新版本号  # 请替换为实际可用的最新版本号

2. 导入包

在你的Dart文件中导入progress_border包：

import 'package:progress_border/progress_border.dart';

3. 使用自定义进度条边框

以下是一个完整的示例，展示如何使用ProgressBorder来自定义进度条的边框：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Progress Border Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ProgressBorderDemo(),
    );
  }
}

class ProgressBorderDemo extends StatefulWidget {
  @override
  _ProgressBorderDemoState createState() => _ProgressBorderDemoState();
}

class _ProgressBorderDemoState extends State<ProgressBorderDemo> with SingleTickerProviderStateMixin {
  double _progress = 0.0;

  @override
  void initState() {
    super.initState();
    _startProgress();
  }

  void _startProgress() {
    Future.delayed(Duration(seconds: 5), () {
      setState(() {
        _progress = 1.0;
      });
    });
    Timer.periodic(Duration(milliseconds: 16), (timer) {
      setState(() {
        _progress += 0.01;
        if (_progress >= 1.0) {
          timer.cancel();
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Progress Border Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              width: 200,
              height: 50,
              child: ProgressBorder(
                progress: _progress,
                borderRadius: BorderRadius.circular(25.0),
                borderColor: Colors.blue,
                borderWidth: 5.0,
                child: LinearProgressIndicator(
                  value: _progress,
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
                  backgroundColor: Colors.grey[300]!,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解释

导入包：首先导入progress_border包。
定义主应用：使用MaterialApp构建主应用。
定义状态管理：在_ProgressBorderDemoState中管理进度条的进度。
初始化进度：在initState中启动一个定时器，用于在5秒内将进度条从0填充到1。
构建UI：使用ProgressBorder自定义进度条的边框，并嵌套一个LinearProgressIndicator作为子组件。

ProgressBorder的参数包括：

progress：进度值，范围在0到1之间。
borderRadius：边框的圆角。
borderColor：边框的颜色。
borderWidth：边框的宽度。
child：进度条本身，这里使用LinearProgressIndicator。

这样，你就可以使用progress_border插件来自定义Flutter中的进度条边框了。希望这个示例对你有帮助！