| English Document | 中文文档 |
|---|
ai_progress:
-
- 圆环进度
-
- 扇形进度
-
- 线性进度
-
- 步进进度
-
- 仪表盘进度
| iOS-ai_progress | Android-ai_progress |
|---|---|
 |
 |
| :- | :- |
| macOS-ai_progress | Web-ai_progress |
|---|---|
 |
 |
| :- | :- |
使用当前包作为依赖库
在文件 'pubspec.yaml' 中添加
dependencies:
ai_progress: ^version
或者以下方式依赖
dependencies:
# ai_progress package.
ai_progress:
git:
url: https://github.com/pdliuw/ai_progress.git
你可以通过下面的命令行来安装此库
$ flutter pub get
你也可以通过项目开发工具通过可视化操作来执行上述步骤
现在，在你的Dart编辑代码中，你可以使用：
import 'package:ai_progress/ai_progress.dart';
| 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}%"),
],
),
| 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}%"),
],
),
| 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}%"),
],
),
| 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}%"),
],
),
| 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}%"),
],
),
| 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}%"),
],
),
| 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}%"),
],
),
| 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}%"),
],
),
| 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}%"),
],
),
| 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}%"),
],
),
意犹未尽？点击，查看项目示例
BSD 3-Clause License
Copyright (c) 2020, pdliuw
All rights reserved.