ai_progress

原创文章，侵权必究！如若转载，请联系作者，并标注来源！
totem_four_logo.jpg

---

English Document	中文文档

ai_progress 支持:

ai_progress: [图片上传失败...(image-f8976f-1586774582991)]

• 1. 圆环进度
• 2. 扇形进度
• 3. 线性进度
• 4. 步进进度

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）的技术示例。
• 移步查看更多特征......