ai_progress

Description:

ai progress

ai_progress #





English Document
中文文档



ai_progress 支持:
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