Flutter圆形进度指示器插件flutter_circular_progress_indicator的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter圆形进度指示器插件flutter_circular_progress_indicator的使用

加载数据更美观。

!!! 注意

该插件已迁移到:

animated_progress: ^0.0.1

https://pub.dev/packages/animated_progress/

更新将从现在开始在该地址进行

!!! 注意

已修复的错误

V 0.0.2 :

setState error fixed

安装

你只需要在你的pubspec.yaml文件中添加flutter_circular_progress_indicator作为依赖项。

dependencies:
  flutter_circular_progress_indicator: ^0.0.2

开始使用

所有功能你可以使用:

使用示例

普通圆形进度指示器

CircularProgressInd().normalCircular(
  height: 55, // 高度
  width: 55, // 宽度
  valueColor: Colors.pink, // 进度条颜色
  secondaryColor: Colors.deepPurple[900], // 背景色
  secondaryWidth: 10, // 背景宽度
  valueWidth: 6, // 进度条宽度
);

带旋转动画的圆形进度指示器

CircularProgressInd().normalCircular(
  height: 55, // 高度
  width: 55, // 宽度
  isSpining: true, // 是否旋转
  spinDuration: Duration(seconds: 3), // 旋转周期
  valueColor: Colors.pink, // 进度条颜色
  secondaryColor: Colors.deepPurple[900], // 背景色
  secondaryWidth: 10, // 背景宽度
  valueWidth: 6, // 进度条宽度
);

带旋转动画且反转的圆形进度指示器

CircularProgressInd().normalCircular(
  height: 55, // 高度
  width: 55, // 宽度
  valueColor: Colors.deepOrange, // 进度条颜色
  valueWidth: 5, // 进度条宽度
  isSpining: true, // 是否旋转
);

带反转旋转动画的圆形进度指示器

CircularProgressInd().normalCircular(
  height: 55, // 高度
  width: 55, // 宽度
  value: .4, // 当前进度值
  isSpining: true, // 是否旋转
  hasSpinReverse: true, // 是否反转旋转
  valueColor: Colors.pink, // 进度条颜色
  secondaryColor: Colors.deepPurple[900], // 背景色
  secondaryWidth: 10, // 背景宽度
  valueWidth: 6, // 进度条宽度
);

带背景圆的圆形进度指示器

CircularProgressInd().normalCircular(
  height: 55, // 高度
  width: 55, // 宽度
  isSpining: true, // 是否旋转
  secondaryColor: Colors.deepPurple[900], // 背景色
  secondaryWidth: 10, // 背景宽度
  backgroundColor: Colors.amber, // 背景颜色
  padding: EdgeInsets.all(10), // 内边距
  backgroundBorder: Border.all(color: Colors.deepPurple, width: 3), // 背景边框
  valueWidth: 6, // 进度条宽度
);

带背景矩形的圆形进度指示器

CircularProgressInd().normalCircular(
  height: 80, // 高度
  width: 80, // 宽度
  isSpining: true, // 是否旋转
  value: .01, // 当前进度值
  secondaryColor: const Color.fromARGB(255, 23, 82, 27), // 背景色
  secondaryWidth: 10, // 背景宽度
  backgroundShape: BoxShape.rectangle, // 背景形状
  backgroundRadius: 10, // 背景圆角
  backgroundColor: Colors.green, // 背景颜色
  padding: EdgeInsets.all(10), // 内边距
  valueColor: Colors.green[200], // 进度条颜色
  backgroundBorder: Border.all(
    color: const Color.fromARGB(255, 23, 82, 27), // 边框颜色
    width: 3, // 边框宽度
  ),
  valueWidth: 6, // 进度条宽度
);

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

1 回复

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


当然,下面是一个关于如何使用 flutter_circular_progress_indicator 插件的示例代码。这个插件可以帮助你在 Flutter 应用中创建一个圆形的进度指示器。

首先,确保你已经在 pubspec.yaml 文件中添加了 flutter_circular_progress_indicator 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_circular_progress_indicator: ^2.0.0  # 请检查最新版本号

然后运行 flutter pub get 以获取依赖。

接下来是一个完整的示例代码,展示如何在 Flutter 应用中使用这个插件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Circular Progress Indicator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Circular Progress Indicator Demo'),
        ),
        body: Center(
          child: CircularProgressDemo(),
        ),
      ),
    );
  }
}

class CircularProgressDemo extends StatefulWidget {
  @override
  _CircularProgressDemoState createState() => _CircularProgressDemoState();
}

class _CircularProgressDemoState extends State<CircularProgressDemo> with SingleTickerProviderStateMixin {
  double _progress = 0.0;

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

  void _startProgress() {
    Timer.periodic(Duration(milliseconds: 100), (timer) {
      setState(() {
        if (_progress < 1.0) {
          _progress += 0.01;
        } else {
          timer.cancel();
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          height: 200,
          width: 200,
          child: CircularProgressIndicator(
            value: _progress,
            lineWidth: 12.0,
            backgroundColor: Colors.grey[200]!,
            progressColor: Colors.blue,
            semicircle: false,
            percentage: true,
            center: Text(
              '$_progress * 100%',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _progress = 0.0;
              _startProgress();
            });
          },
          child: Text('Restart Progress'),
        ),
      ],
    );
  }
}

代码解释:

  1. 依赖添加:在 pubspec.yaml 中添加 flutter_circular_progress_indicator 依赖。
  2. 主应用MyApp 类定义了一个基本的 Flutter 应用结构,包括 MaterialAppScaffold
  3. 进度指示器演示CircularProgressDemo 是一个有状态的组件,包含一个 _progress 变量来跟踪进度。
  4. 初始化进度:在 initState 方法中,使用 Timer.periodic 每 100 毫秒更新一次进度。
  5. 构建 UI:在 build 方法中,使用 CircularProgressIndicator 组件来显示圆形进度指示器,并通过 Text 组件显示当前进度百分比。
  6. 重置进度:一个按钮可以重置进度并重新启动进度指示器。

这个示例展示了如何使用 flutter_circular_progress_indicator 插件创建一个简单的圆形进度指示器,并根据需要更新进度。你可以根据需要进一步自定义和扩展这个示例。

回到顶部