ai_progress 2.0.0
ai_progress: ^2.0.0 copied to clipboard
A new multiple style progress include of circular、linear and step style progress indicator.
ai_progress #
English Document | 中文文档 |
---|
ai_progress 支持:
-
- 圆环进度
-
- 扇形进度
-
- 线性进度
-
- 步进进度
-
- 仪表盘进度
Effect #
iOS-ai_progress | Android-ai_progress |
---|
![]() |
![]() |
---|
macOS-ai_progress | Web-ai_progress |
---|
![]() |
![]() |
---|
1.安装 #
使用当前包作为依赖库
1. 依赖此库 #
在文件 'pubspec.yaml' 中添加
dependencies:
ai_progress: ^version
copied to clipboard
或者以下方式依赖
dependencies:
# ai_progress package.
ai_progress:
git:
url: https://github.com/pdliuw/ai_progress.git
copied to clipboard
2. 安装此库 #
你可以通过下面的命令行来安装此库
$ flutter pub get
copied to clipboard
你也可以通过项目开发工具通过可视化操作来执行上述步骤
3. 导入此库 #
现在,在你的Dart编辑代码中,你可以使用:
import 'package:ai_progress/ai_progress.dart';
copied to clipboard
2.使用 #
1. 圆环进度-方形帽 #
ai_progress: circular-square |
---|
![]() |
---|
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 150,
height: 150,
padding: EdgeInsets.all(5),
child: CircularProgressIndicator(
value: _segmentValue / 10,
strokeWidth: 10.0,
valueColor: _colorTween,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
copied to clipboard
2. 圆环进度-圆形帽 #
ai_progress: circular-round |
---|
![]() |
---|
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 150,
height: 150,
padding: EdgeInsets.all(5),
child: AirCircularStateProgressIndicator(
size: Size(150, 150),
value: _segmentValue / 10 * 100, //1~100
pathColor: Colors.white,
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 10.0,
valueStrokeWidth: 10.0,
useCenter: false,
filled: false,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
copied to clipboard
3. 扇形进度 #
ai_progress: circular-arc |
---|
![]() |
---|
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 150,
height: 150,
padding: EdgeInsets.all(5),
child: AirCircularStateProgressIndicator(
size: Size(150, 150),
value: _segmentValue / 10 * 100, //1~100
pathColor: Colors.white,
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 10.0,
valueStrokeWidth: 10.0,
useCenter: true,
filled: true,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
copied to clipboard
4. 线性进度-方形帽 #
ai_progress: linear-square |
---|
![]() |
---|
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 150,
padding: EdgeInsets.all(5),
child: LinearProgressIndicator(
value: _segmentValue / 10,
valueColor: _colorTween,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
copied to clipboard
5. 线性进度-圆形帽 #
ai_progress: linear-round |
---|
![]() |
---|
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 150,
height: 50,
padding: EdgeInsets.all(5),
child: AirLinearStateProgressIndicator(
size: Size(150, 150),
value: _segmentValue / 10 * 100, //1~100
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 10.0,
valueStrokeWidth: 10.0,
roundCap: true,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
copied to clipboard
6. 步进进度-normal #
ai_progress: step-normal |
---|
![]() |
---|
Row(
children: [
Container(
width: 90,
height: 50,
padding: EdgeInsets.all(0),
child: AirStepStateProgressIndicator(
size: Size(150, 150),
stepCount: _segmentChildren.length,
stepValue: _segmentValue,
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 10.0,
valueStrokeWidth: 10.0,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
copied to clipboard
7. 步进进度-larger #
ai_progress: step-larger |
---|
![]() |
---|
Row(
children: [
Container(
width: 250,
height: 50,
padding: EdgeInsets.all(0),
child: AirStepStateProgressIndicator(
size: Size(150, 150),
stepCount: _segmentChildren.length,
stepValue: _segmentValue,
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 30.0,
valueStrokeWidth: 30.0,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
copied to clipboard
8. 步进进度-圆形帽 #
ai_progress: step-round |
---|
![]() |
---|
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(45),
bottomLeft: Radius.circular(45),
topRight: Radius.circular(45),
bottomRight: Radius.circular(45),
)),
),
width: 220,
height: 30.0,
child: AirStepStateProgressIndicator(
size: Size(150, 220),
stepCount: _segmentChildren.length,
stepValue: _segmentValue,
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 30.0,
valueStrokeWidth: 30.0,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
copied to clipboard
9. 仪表盘进度-方形帽 #
ai_progress: dashboard-square |
---|
![]() |
---|
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 150,
height: 150,
padding: EdgeInsets.all(5),
child: AirDashboardStateProgressIndicator(
size: Size(150, 150),
value: _segmentValue / 10 * 100, //1~100
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 10,
valueStrokeWidth: 10,
gapDegree: 60,
roundCap: false,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
copied to clipboard
10. 仪表盘进度-圆形帽 #
ai_progress: dashboard-round |
---|
![]() |
---|
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 150,
height: 150,
padding: EdgeInsets.all(5),
child: AirDashboardStateProgressIndicator(
size: Size(150, 150),
value: _segmentValue / 10 * 100, //1~100
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 10,
valueStrokeWidth: 10,
gapDegree: 60,
roundCap: true,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
copied to clipboard
意犹未尽?点击,查看项目示例
LICENSE #
BSD 3-Clause License
Copyright (c) 2020, pdliuw
All rights reserved.
copied to clipboard