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 分類

安裝套件