Flutter自定义进度指示器插件custom_progress_indicator的使用

Flutter自定义进度指示器插件custom_progress_indicator的使用

特性

  • 🌟 可定制的圆形进度指示器
  • 🌟 可定制的线性进度指示器

开始使用

安装插件

在你的 pubspec.yaml 文件中添加该包：

dependencies:
    flutter:
        sdk: flutter
    custom_indicator: any

或者使用命令行安装：

flutter pub add custom_indicator

然后在 Dart 文件中导入插件：

import 'package:custom_indicator/custom_indicator.dart';

使用方法

不带值的指示器

你可以直接使用 CustomLinearIndicator() 和 CustomCircleIndicator() 创建不带值的指示器。

CustomLinearIndicator(),
CustomCircleIndicator(),

带值的指示器

你可以通过设置 value 属性来指定进度条的当前值，并且可以通过 backColor 来改变背景颜色。

CustomCircleIndicator(
    value: 100,
    backColor: Colors.red,
),

CustomLinearIndicator(
    value: 100,
    backColor: Colors.red,
),

更改指示器类型

你可以通过设置 indicatorType 属性来更改指示器的类型。例如，将指针类型更改为 pointer：

CustomCircleIndicator(
    value: 35,
    backColor: Colors.red,
    pointerColor: Colors.red,
    indicatorType: IndicatorType.pointer,
),

CustomLinearIndicator(
    value: 35,
    backColor: Colors.red,
    indicatorType: IndicatorType.pointer,
),

检查完成状态

你可以在进度达到 100% 时执行一些操作，通过设置 checkOnFinish 属性为 true：

CustomCircleIndicator(
    value: 100,
    checkOnFinish: true,
    backColor: Colors.red,
),

CustomLinearIndicator(
    value: 100,
    backColor: Colors.red,
    checkOnFinish: true,
    height: 70,
),

更改线性边缘类型

你可以通过设置 edgeType 属性来更改线性进度条的边缘类型：

CustomLinearIndicator(
    value: 35,
    backColor: Colors.red,
    checkOnFinish: true,
    edgeType: EdgeType.square,
),

填充线性进度条

你可以通过设置 filled 属性为 true 来填充线性进度条：

CustomLinearIndicator(
    value: 35,
    backColor: Colors.red,
    checkOnFinish: true,
    filled: true,
),

隐藏进度条的值

你可以通过设置 showValue 属性为 false 来隐藏进度条的值：

CustomLinearIndicator(
    value: 35,
    backColor: Colors.red,
    checkOnFinish: true,
    filled: true,
    showValue: false,
),

完整示例代码

下面是一个完整的示例代码，展示了如何使用 custom_progress_indicator 插件。

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('自定义进度指示器示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CustomLinearIndicator(
                value: 35,
                backColor: Colors.red,
                checkOnFinish: true,
                filled: true,
                showValue: true,
              ),
              SizedBox(height: 20),
              CustomCircleIndicator(
                value: 100,
                backColor: Colors.blue,
                checkOnFinish: true,
                showValue: true,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自定义进度指示器插件custom_progress_indicator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


在 Flutter 中，如果你想使用自定义进度指示器，可以通过创建一个自定义的 CustomProgressIndicator 插件来实现。以下是一个简单的示例，展示了如何创建和使用一个自定义的进度指示器。

1. 创建自定义进度指示器

首先，创建一个自定义的进度指示器组件。这个组件可以是一个 StatelessWidget 或 StatefulWidget，具体取决于你是否需要在指示器中维护状态。

import 'package:flutter/material.dart';

class CustomProgressIndicator extends StatelessWidget {
  final double progress;
  final Color backgroundColor;
  final Color progressColor;
  final double strokeWidth;

  const CustomProgressIndicator({
    Key? key,
    required this.progress,
    this.backgroundColor = Colors.grey,
    this.progressColor = Colors.blue,
    this.strokeWidth = 4.0,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 200,
      child: Stack(
        alignment: Alignment.center,
        children: [
          CircularProgressIndicator(
            value: 1.0,
            backgroundColor: backgroundColor,
            valueColor: AlwaysStoppedAnimation<Color>(backgroundColor),
            strokeWidth: strokeWidth,
          ),
          CircularProgressIndicator(
            value: progress,
            backgroundColor: Colors.transparent,
            valueColor: AlwaysStoppedAnimation<Color>(progressColor),
            strokeWidth: strokeWidth,
          ),
          Center(
            child: Text(
              '${(progress * 100).toStringAsFixed(1)}%',
              style: const TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

2. 使用自定义进度指示器

在你的应用中，你可以像使用其他小部件一样使用 CustomProgressIndicator。

import 'package:flutter/material.dart';
import 'custom_progress_indicator.dart'; // 导入自定义进度指示器

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Custom Progress Indicator'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('Custom Progress Indicator'),
              const SizedBox(height: 20),
              CustomProgressIndicator(
                progress: 0.75, // 设置进度值 (0.0 - 1.0)
                backgroundColor: Colors.grey[300]!,
                progressColor: Colors.blue,
                strokeWidth: 10.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部