Flutter 的液体进度指示器

液态进度指示器

Flutter 的液体进度指示器。

特点

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

用法

import 'package:liquid_progress_indicator/liquid_progress_indicator.dart';

LiquidCircularProgressIndicator

LiquidCircularProgressIndicator(
  value: 0.25, // Defaults to 0.5.
  valueColor: AlwaysStoppedAnimation(Colors.pink), // Defaults to the current Theme's accentColor.
  backgroundColor: Colors.white, // Defaults to the current Theme's backgroundColor.
  borderColor: Colors.red,
  borderWidth: 5.0,
  direction: Axis.horizontal, // The direction the liquid moves (Axis.vertical = bottom to top, Axis.horizontal = left to right). Defaults to Axis.vertical.
  center: Text("Loading..."),
);

LiquidLinearProgressIndicator

LiquidLinearProgressIndicator(
  value: 0.25, // Defaults to 0.5.
  valueColor: AlwaysStoppedAnimation(Colors.pink), // Defaults to the current Theme's accentColor.
  backgroundColor: Colors.white, // Defaults to the current Theme's backgroundColor.
  borderColor: Colors.red,
  borderWidth: 5.0,
  borderRadius: 12.0,
  direction: Axis.vertical, // The direction the liquid moves (Axis.vertical = bottom to top, Axis.horizontal = left to right). Defaults to Axis.horizontal.
  center: Text("Loading..."),
);

LiquidCustomProgressIndicator

LiquidCustomProgressIndicator(
  value: 0.2 // Defailts to 0.5.
  valueColor: AlwaysStoppedAnimation(Colors.pink), // Defaults to the current Theme's accentColor.
  backgroundColor: Colors.white, // Defaults to the current Theme's backgroundColor.
  direction: Axis.vertical, // The direction the liquid moves (Axis.vertical = bottom to top, Axis.horizontal = left to right).
  shapePath: _buildBoatPath(), // A Path object used to draw the shape of the progress indicator.
)

GitHub

https://github.com/JordanADavies/liquid_progress_indicator