Flutter进度指示器插件liquid_progress_indicator_ns的使用

Flutter进度指示器插件liquid_progress_indicator_ns的使用

liquid_progress_indicator_ns 是一个用于 Flutter 应用的进度指示器插件。它提供了三种类型的进度指示器：液态圆形进度指示器（LiquidCircularProgressIndicator）、液态线性进度指示器（LiquidLinearProgressIndicator）和自定义形状进度指示器（LiquidCustomProgressIndicator）。这些进度指示器可以自定义颜色、边框、方向等属性。

特性

• 液态圆形进度指示器。
• 液态线性进度指示器。
• 自定义形状进度指示器。
• 使用方式与 Flutter 自带的 ProgressIndicator 类似。
• 可以自定义颜色、边框、方向等属性。

使用方法

首先，需要在项目中引入 liquid_progress_indicator_ns 包：

import 'package:liquid_progress_indicator_ns/liquid_progress_indicator.dart';

液态圆形进度指示器（LiquidCircularProgressIndicator）

LiquidCircularProgressIndicator(
  value: 0.25, // 默认值为 0.5。
  valueColor: AlwaysStoppedAnimation(Colors.pink), // 默认值为当前主题的强调色。
  backgroundColor: Colors.white, // 默认值为当前主题的背景色。
  borderColor: Colors.red,
  borderWidth: 5.0,
  direction: Axis.horizontal, // 液体移动的方向（Axis.vertical = 从下到上，Axis.horizontal = 从左到右）。默认值为 Axis.vertical。
  center: Text("Loading..."), // 中心文本。
);

液态线性进度指示器（LiquidLinearProgressIndicator）

LiquidLinearProgressIndicator(
  value: 0.25, // 默认值为 0.5。
  valueColor: AlwaysStoppedAnimation(Colors.pink), // 默认值为当前主题的强调色。
  backgroundColor: Colors.white, // 默认值为当前主题的背景色。
  borderColor: Colors.red,
  borderWidth: 5.0,
  borderRadius: 12.0,
  direction: Axis.vertical, // 液体移动的方向（Axis.vertical = 从下到上，Axis.horizontal = 从左到右）。默认值为 Axis.horizontal。
  center: Text("Loading..."), // 中心文本。
);

自定义形状进度指示器（LiquidCustomProgressIndicator）

LiquidCustomProgressIndicator(
  value: 0.2, // 默认值为 0.5。
  valueColor: AlwaysStoppedAnimation(Colors.pink), // 默认值为当前主题的强调色。
  backgroundColor: Colors.white, // 默认值为当前主题的背景色。
  direction: Axis.vertical, // 液体移动的方向（Axis.vertical = 从下到上，Axis.horizontal = 从左到右）。
  shapePath: _buildBoatPath(), // 一个 Path 对象用于绘制进度指示器的形状。进度指示器的大小由该路径的边界创建。
)

其中 _buildBoatPath() 函数需要自行实现，用于定义自定义形状的路径。

完整示例 Demo

以下是一个完整的 Flutter 应用示例，演示了如何使用 liquid_progress_indicator_ns 插件的不同类型的进度指示器。

import 'package:flutter/material.dart';

import 'liquid_circular_progress_indicator_page.dart';
import 'liquid_custom_progress_indicator_page.dart';
import 'liquid_linear_progress_indicator_page.dart';

void main() => runApp(MaterialApp(home: Example()));

class Example extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Liquid Progress Indicator Examples"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(28.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextButton(
              child: Text("Circular"),
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.resolveWith(
                      (states) => Colors.grey[300])),
              onPressed: () => Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) => LiquidCircularProgressIndicatorPage(),
                ),
              ),
            ),
            TextButton(
              child: Text("Linear"),
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.resolveWith(
                      (states) => Colors.grey[300])),
              onPressed: () => Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) => LiquidLinearProgressIndicatorPage(),
                ),
              ),
            ),
            TextButton(
              child: Text("Custom"),
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.resolveWith(
                      (states) => Colors.grey[300])),
              onPressed: () => Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) => LiquidCustomProgressIndicatorPage(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}