ai_progress
| 原创文章，侵权必究！如若转载，请联系作者，并标注来源！ |
|---|
totem_four_logo.jpg
|
| English Document | 中文文档 |
|---|
ai_progress 支持:
ai_progress: [图片上传失败...(image-f8976f-1586774582991)]
- 圆环进度
- 扇形进度
- 线性进度
- 步进进度
Effect
| iOS-ai_progress | Android-ai_progress |
|---|---|
ios
|
android
|
| :- | :- |
| macOS-ai_progress | Web-ai_progress |
|---|---|
macOS
|
web
|
| :- | :- |
1.安装
使用当前包作为依赖库
1. 依赖此库
在文件 'pubspec.yaml' 中添加
[图片上传失败...(image-a91624-1586774582991)]
dependencies:
ai_progress: ^version
或者以下方式依赖
dependencies:
# ai_progress package.
ai_progress:
git:
url: https://github.com/pdliuw/ai_progress.git
2. 安装此库
你可以通过下面的命令行来安装此库
$ flutter pub get
你也可以通过项目开发工具通过可视化操作来执行上述步骤
3. 导入此库
现在，在你的Dart编辑代码中，你可以使用：
import 'package:ai_progress/ai_progress.dart';
2.使用
1. 圆环进度-方形帽
| ai_progress: circular-square |
|---|
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}%"),
],
),
2. 圆环进度-圆形帽
| ai_progress: circular-round |
|---|
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}%"),
],
),
3. 扇形进度
| ai_progress: circular-arc |
|---|
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}%"),
],
),
4. 线性进度-方形帽
| ai_progress: linear-square |
|---|
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}%"),
],
),
5. 线性进度-圆形帽
| ai_progress: linear-round |
|---|
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}%"),
],
),
6. 步进进度-normal
| ai_progress: step-normal |
|---|
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}%"),
],
),
7. 步进进度-larger
| ai_progress: step-larger |
|---|
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}%"),
],
),
意犹未尽？点击，查看项目示例
flutter开发者项目示例：
flutter_app_sample 帮助flutter开发者更快入门、精进，避免不必要的技术坑。
如果您觉得此项目对您有所帮助，也可以"star"一下，我们得到您的鼓励后会更有动力持续推出更多有益于您的技术示例
特征：
- 本项目是主打技术示例，所以涉及到的需求会比较少，涉及到的技术会比较多
- 本项目是为flutter开发者专门打造的“Api demo app”
- 本项目不仅包含flutter 各种widget组件，还包含开发包、插件，以及与各平台platforms交互、通信（Platform Channel）的技术示例。
- 移步查看更多特征......
网友评论