Flutter 中如何手动绘制一个水滴球（波浪球）（水滴图）

Flutter 中如何手动绘制一个水滴球（波浪球）（水滴图）

效果预览

本组件实现了一个具有动态波浪效果的液体填充球，支持以下特性：

• 🌊 可调节的波浪动画速度
• 🎨 自定义波浪颜色或渐变色
• 🔢 精确的百分比控制（0.0-1.0）
• 📏 灵活调整容器尺寸和边距
• 🖼️ 可定制的圆形边框样式

Pub.dev 发布地址：https://pub.dev/packages/liquid_ball

Github预览图：https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fraw.githubusercontent.com%2FAzad-Zhang%2Fmy_image%2Frefs%2Fheads%2Fmain%2Fliquid_ball.gif&pos_id=img-tBwg7k4S-1747406024452)

快速开始

1. 基础代码结构（核心代码解析）

// 组件核心结构
LiquidBallWidget(
  waveColor: Colors.blue,   // 单色模式
  percentage: 0.75,         // 填充比例（重要参数）
)

代码说明：

• 使用 LiquidBallWidget 作为容器
• waveColor 控制波浪颜色（与 waveGradient 二选一）
• percentage 是关键控制参数（0.0=空，1.0=满）

2. 完整组件树示例

@override
Widget build(BuildContext context) {
   
  return Scaffold(
    body: Center(
      child: LiquidBallWidget(
        waveGradient: LinearGradient(
          colors: [Colors.purple[300]!, Colors.blue[200]!],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        containerSize: 150,
        percentage: 0.6,
        containerBorder: Border.all(
          color: Colors.amber,
          width: 2,
          style: BorderStyle.solid,
        ),
      ),
    ),
  );
}

• 关键代码解析：

  • waveGradient 实现渐变效果（需配合 LinearGradient）
  • containerSize 控制整体尺寸（直径长度）
  • containerBorder 自定义边框样式

核心参数深度解析<