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

curved_progress_bar 是一个Flutter插件，用于创建具有圆角边缘的进度条，并且可以添加动画时间来构建进度条。

Features

• 进度条具有圆角边缘。
• 支持为进度条添加动画持续时间。

Getting started

在您的 pubspec.yaml 文件中添加依赖：

dependencies:
  curved_progress_bar: ^1.0.2

然后运行 flutter pub get 来获取新的依赖包。

Usage

CurvedCircularProgressIndicator

这是一个圆形的进度条，您可以设置它的值、边框宽度、动画时长、背景颜色和进度颜色。

CurvedCircularProgressIndicator(
  value: 0.5, // 进度值（范围：0.0 到 1.0）
  strokeWidth: 12, // 边框宽度
  animationDuration: const Duration(seconds: 1), // 动画持续时间
  backgroundColor: Color(0xFFFFFFCD), // 背景颜色
  color: Colors.blue, // 进度颜色
),

也可以直接使用默认参数：

const CurvedCircularProgressIndicator(),

CurvedLinearProgressIndicator

这是一个线性的进度条，同样可以设置其值、边框宽度、背景颜色和进度颜色。

CurvedLinearProgressIndicator(
  value: 0.5, // 进度值（范围：0.0 到 1.0）
  strokeWidth: 8, // 边框宽度
  backgroundColor: Colors.amber, // 背景颜色
  color: Colors.red, // 进度颜色
),

或者使用默认参数：

const CurvedLinearProgressIndicator(),

示例Demo

下面是一个完整的示例应用程序，演示了如何使用 CurvedCircularProgressIndicator 和 CurvedLinearProgressIndicator。通过点击浮层按钮，可以更新进度条的值。

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

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

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

  @override
  DemoAppState createState() => DemoAppState();
}

double _value = 0.4;

class DemoAppState extends State<DemoApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Curved Progress Bar Example')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Center(
            child: SizedBox(
              height: 200,
              width: 200,
              child: CurvedCircularProgressIndicator(
                value: _value,
                animationDuration: const Duration(seconds: 3),
                backgroundColor: Colors.amber,
                color: Colors.red,
                strokeWidth: 9,
              ),
            ),
          ),
          Center(
            child: SizedBox(
              height: 200,
              width: 200,
              child: CurvedLinearProgressIndicator(
                value: _value,
                strokeWidth: 8,
                backgroundColor: Colors.amber,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: IconButton(
        onPressed: () {
          setState(() {
            if (_value >= 1.0) {
              _value = 0;
            } else {
              _value += 0.05;
            }
          });
        },
        icon: const Icon(Icons.refresh),
      ),
    );
  }
}

Additional information

更多详细信息请参阅 GitHub项目

Author

Uttam Laila, 自2019年起成为Flutter开发者。

• StackOverflow
• GitHub
• Twitter
• LinkedIn