Flutter进度指示插件ai

Flutter进度指示插件ai_progress的使用

English Document	中文文档

ai_progress 支持:

ai_progress

1. 圆环进度
1. 扇形进度
1. 线性进度
1. 步进进度
1. 仪表盘进度

Effect

iOS-ai_progress

Android-ai_progress

iOS	Android

macOS-ai_progress

Web-ai_progress

macOS	Web

1. 安装

1. 依赖此库

在文件 pubspec.yaml 中添加：

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

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

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,
        roundCap: true,
      ),
    ),
    Text("${_segmentValue / 10 * 100}%"),
  ],
)

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}%"),
  ],
)

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}%"),
  ],
)

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}%"),
  ],
)

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}%"),
  ],
)

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}%"),
  ],
)

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}%"),
  ],
)

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}%"),
  ],
)

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}%"),
  ],
)

意犹未尽？点击，查看项目示例

LICENSE

BSD 3-Clause License

Copyright (c) 2020, pdliuw
All rights reserved.

更多关于Flutter进度指示插件ai_progress的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼•4 天前

更多关于Flutter进度指示插件ai_progress的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter中使用ai_progress插件的示例代码。ai_progress是一个用于显示进度指示的Flutter插件，它提供了多种样式和动画效果来展示加载或任务进度。

首先，确保在你的pubspec.yaml文件中添加ai_progress依赖：

dependencies:
  flutter:
    sdk: flutter
  ai_progress: ^x.y.z  # 请将x.y.z替换为最新的版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下方式使用ai_progress：

import 'package:flutter/material.dart';
import 'package:ai_progress/ai_progress.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ai_progress Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ProgressIndicatorScreen(),
    );
  }
}

class ProgressIndicatorScreen extends StatefulWidget {
  @override
  _ProgressIndicatorScreenState createState() => _ProgressIndicatorScreenState();
}

class _ProgressIndicatorScreenState extends State<ProgressIndicatorScreen> with SingleTickerProviderStateMixin {
  double progress = 0.0;
  bool isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ai_progress Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(height: 20),
            Text('Progress: ${(progress * 100).toInt()}%'),
            SizedBox(height: 20),
            AiCircularProgressIndicator(
              progress: progress,
              size: 100,
              strokeWidth: 5,
              color: Colors.blue,
              backgroundColor: Colors.grey[200]!,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  isLoading = true;
                  startProgress();
                });
              },
              child: Text('Start Progress'),
            ),
          ],
        ),
      ),
    );
  }

  void startProgress() async {
    final progressInterval = 1.0 / 100; // 100 steps to complete 100%
    for (int i = 0; i <= 100; i++) {
      setState(() {
        progress = i * progressInterval;
      });
      await Future.delayed(Duration(milliseconds: 50)); // Simulate time-consuming task
    }
    setState(() {
      isLoading = false;
    });
  }
}

解释

依赖安装：首先，在pubspec.yaml文件中添加ai_progress依赖。
主应用结构：在MyApp类中，我们定义了应用的主题和主页ProgressIndicatorScreen。
进度指示器屏幕：在ProgressIndicatorScreen类中，我们定义了一个状态类_ProgressIndicatorScreenState，其中包含进度值和加载状态的变量。
UI布局：使用Column布局来排列文本、进度指示器和按钮。AiCircularProgressIndicator用于显示圆形进度指示器。
启动进度：startProgress函数模拟了一个耗时任务，通过循环逐步增加进度值，并使用Future.delayed来模拟延迟。
按钮点击事件：点击按钮时，调用startProgress函数开始进度加载。

这样，你就可以在你的Flutter应用中展示一个圆形的进度指示器，并随着任务的进行更新进度。你可以根据需要调整进度指示器的样式和参数。