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

Liquid 进度指示器为 Flutter 提供了多种类型的进度指示器。它支持圆形、线性和自定义形状的进度指示器，并且可以进行各种自定义设置。

特性

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

使用方法

首先，在项目中引入 liquid_progress_indicator 包：

import 'package:liquid_progress_indicator/liquid_progress_indicator.dart';

液态圆形进度指示器

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

其中 _buildBoatPath() 函数需要自行实现，例如：

Path _buildBoatPath() {
  final path = Path();
  path.moveTo(0, 0);
  path.lineTo(100, 0);
  path.quadraticBezierTo(150, 50, 100, 100);
  path.lineTo(0, 100);
  path.close();
  return path;
}

完整示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 liquid_progress_indicator 插件。

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: [
            FlatButton(
              child: Text("Circular"),
              color: Colors.grey[300],
              onPressed: () => Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) => LiquidCircularProgressIndicatorPage(),
                ),
              ),
            ),
            FlatButton(
              child: Text("Linear"),
              color: Colors.grey[300],
              onPressed: () => Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) => LiquidLinearProgressIndicatorPage(),
                ),
              ),
            ),
            FlatButton(
              child: Text("Custom"),
              color: Colors.grey[300],
              onPressed: () => Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) => LiquidCustomProgressIndicatorPage(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}