water_drop

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

water_drop 包允许开发者在 Flutter 应用中的小部件上添加逼真的水滴效果。它利用自定义着色器和动画来模拟水滴形成、融合以及在表面上滑动的外观。非常适合用于增强背景、按钮或交互元素的视觉吸引力，为用户界面带来动态、流畅的美感。该包轻量且与现有 Flutter 小部件无缝集成，无需复杂配置即可轻松实现。特别适用于需要活泼或自然主义设计主题的应用。

适合场景

向按钮添加动画水效果
通过水滴动画增强背景视觉效果
创建具有流体反馈的交互式表面
设计自然灵感的应用界面
通过动态视觉效果提升用户参与度

主要特点

基于自定义着色器的水滴渲染
水滴形成和移动的平滑动画
轻量且易于集成
支持各种 widget 覆盖层
可配置的滴落大小和行为

适合对象

寻求流畅视觉效果的UI设计师
开发趣味或自然主题应用的开发者
需要细微交互反馈的应用程序
专注于视觉创新的Flutter项目
具有动态背景的创意数字体验

使用建议

可能会影响低端设备的性能
需要了解基本的着色器概念
超出水滴外观之外的自定义功能有限
最适合静态或缓慢移动的背景
不适合高频交互场景

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Water Drop 💦💦💦

A simple package for adding water drops to your Widgets!

👇👇👇👇👇👇👇👇👇👇
Blog article with detailed explanation:
https://fidev.io/water-drop
👆👆👆👆👆👆👆👆👆👆

Demo

Why?

Why not?!

How?

Just wrap your widget in WaterDrop and provide params:

Widget build(BuildContext context) {
  return WaterDrop(
    child: _StaticCard(color: Colors.green),
    params: [
      WaterDropParam(top: 50, height: 70, left: 100, width: 50),
      WaterDropParam(top: 10, height: 100, left: 280, width: 100),
      WaterDropParam(top: 155, height: 35, left: 135, width: 35),
      WaterDropParam(top: 135, height: 40, left: 250, width: 30),
      WaterDropParam(top: 20, height: 40, left: 20, width: 40),
      WaterDropParam(top: 140, height: 50, left: 15, width: 40),
      WaterDropParam(top: 20, height: 30, left: 200, width: 30),
      WaterDropParam(top: 120, height: 20, left: 360, width: 20),
    ],
  );
}

Or if you want a single drop, use WaterDrop.single:

@override
Widget build(BuildContext context) {
  return WaterDrop.single(
    top: 50,
    height: 70,
    left: 100,
    width: 50,
    child: _StaticCard(color: Colors.green),
  );
}

搜索插件、代码仓与 APP 分类

安装插件