water_drop

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

water_drop パッケージは、Flutter アプリケーション内のウィジェットの上にリアルな水滴効果を追加できるようにします。カスタムシェーダーとアニメーションを使用して、滴が形成され、結合し、表面を滑る様子をシミュレートします。背景やボタン、インタラクティブ要素の視覚的魅力を高めるのに最適で、UI にダイナミックで流れるような美学をもたらします。パッケージは軽量であり、既存の Flutter ウィジェットとスムーズに統合されるため、大規模な構成なしでも簡単に実装できます。遊び心や自然主義的なデザインテーマを活かすアプリに特に効果的です。

用途

ボタンにアニメーションウォーター効果を追加する
ドロップルアニメーションで背景のビジュアルを強化する
流体フィードバックを備えたインタラクティブな表面の作成
自然をテーマにしたアプリインターフェースのデザイン
動的なビジュアルによるユーザー参加の向上

主な機能

カスタムシェーダーに基づく水滴のレンダリング
ドロップの形成と移動のスムーズなアニメーション
軽量で統合が簡単
さまざまなウィジェットのオーバーレイをサポート
設定可能なドロップレットのサイズと動作

適している対象

滑らかな視覚効果を求める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),
  );
}

パッケージ、リポジトリ、アプリカテゴリを検索

パッケージをインストール