Flutter动画进度条插件animated_overflow_progress_bar的使用

一个为Flutter应用程序设计的可自定义的动画进度条小部件，带有溢出指示功能。

特性

• 进度变化时平滑动画
• 可定制背景色、进度色和溢出色
• 溢出指示带有可定制的条纹图案
• 灵活的尺寸选项
• 可定制的边框圆角

截图

开始使用

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

dependencies:
  animated_overflow_progress_bar: ^1.0.1

使用方法

import 'package:animated_overflow_progress_bar/animated_overflow_progress_bar.dart';

AnimatedOverflowProgressBar(
  total: 100,
  progress: 75,
  width: 300,
  height: 30,
  animationDuration: Duration(milliseconds: 500),
  backgroundColor: Colors.grey[200]!,
  progressColor: Colors.blue,
  overflowColor: Colors.grey[100]!,
  borderColor: Colors.black,
  borderRadius: BorderRadius.circular(15),
  overflowTheme: OverflowTheme(
    stripeColor: Colors.red,
    stripeWidth: 0.75,
    stripeSpacing: 5.0,
  ),
)

自定义边框圆角

你可以通过borderRadius属性来自定义进度条的边框圆角：

// 四个角都是圆角
borderRadius: BorderRadius.circular(15)

// 只有左侧是圆角
borderRadius: BorderRadius.only(
  topLeft: Radius.circular(15),
  bottomLeft: Radius.circular(15),
)

// 每个角都有不同的圆角半径
borderRadius: BorderRadius.only(
  topLeft: Radius.circular(10),
  topRight: Radius.circular(20),
  bottomLeft: Radius.circular(30),
  bottomRight: Radius.circular(40),
)

溢出指示

当进度超过总值时，该组件会自动显示带有可定制条纹图案的溢出部分。这使得超出限制的情况一目了然。

示例

为了更全面地了解如何使用此组件，可以查看本仓库中的example文件夹。它包含了一个完整的Flutter项目，展示了如何使用AnimatedOverflowProgressBar。

要运行示例：

1. 克隆此仓库
2. 导航到example目录
3. 运行flutter pub get
4. 运行flutter run

完整示例

基础用法

这是一个简单的例子，展示如何使用AnimatedOverflowProgressBar：

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

class ProgressBarDemo extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('进度条演示')),
      body: Center(
        child: AnimatedOverflowProgressBar(
          progress: 75,
          total: 100,
          width: 300,
          height: 30,
          backgroundColor: Colors.grey[200]!,
          progressColor: Colors.blue,
          overflowColor: Colors.red[100]!,
          borderColor: Colors.black,
          borderRadius: BorderRadius.circular(15),
          overflowTheme: OverflowTheme(
            stripeColor: Colors.red,
            stripeWidth: 0.75,
            stripeSpacing: 5.0,
          ),
        ),
      ),
    );
  }
}

这将生成一个类似于以下的进度条：

高级用法

你可以创建一个可交互的进度条，使其值发生变化：

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

class InteractiveProgressBarDemo extends StatefulWidget {
  [@override](/user/override)
  _InteractiveProgressBarDemoState createState() => _InteractiveProgressBarDemoState();
}

class _InteractiveProgressBarDemoState extends State<InteractiveProgressBarDemo> {
  double _progress = 50.0;
  final double _total = 100.0;

  void _incrementProgress() {
    setState(() {
      _progress += 10;
      if (_progress > 150) _progress = 0; // 如果值过高则重置
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('交互式进度条演示')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedOverflowProgressBar(
              progress: _progress,
              total: _total,
              width: 300,
              height: 30,
              backgroundColor: Colors.grey[200]!,
              progressColor: Colors.blue,
              overflowColor: Colors.red[100]!,
              borderColor: Colors.black,
              borderRadius: BorderRadius.circular(15),
              overflowTheme: OverflowTheme(
                stripeColor: Colors.red,
                stripeWidth: 0.75,
                stripeSpacing: 5.0,
              ),
            ),
            SizedBox(height: 20),
            Text('进度: $_progress / $_total'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementProgress,
        child: Icon(Icons.add),
      ),
    );
  }
}