Flutter圆形进度指示器插件flutter_circular_progress_indicator的使用
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
更多关于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'),
),
],
);
}
}
代码解释:
- 依赖添加:在
pubspec.yaml
中添加flutter_circular_progress_indicator
依赖。 - 主应用:
MyApp
类定义了一个基本的 Flutter 应用结构,包括MaterialApp
和Scaffold
。 - 进度指示器演示:
CircularProgressDemo
是一个有状态的组件,包含一个_progress
变量来跟踪进度。 - 初始化进度:在
initState
方法中,使用Timer.periodic
每 100 毫秒更新一次进度。 - 构建 UI:在
build
方法中,使用CircularProgressIndicator
组件来显示圆形进度指示器,并通过Text
组件显示当前进度百分比。 - 重置进度:一个按钮可以重置进度并重新启动进度指示器。
这个示例展示了如何使用 flutter_circular_progress_indicator
插件创建一个简单的圆形进度指示器,并根据需要更新进度。你可以根据需要进一步自定义和扩展这个示例。