Open2

InkWellとは？

Flutter
muranakarmuranakar

InkWellは2つの単語から構成されています：

  1. Ink（インク）
  • 液体の染料や顔料を意味します
  • Flutterの文脈では、タップした時に広がる波紋のようなアニメーション効果を表現しています
  • この波紋効果は、水面に墨汁を落としたときのように広がっていくことから、"Ink"という言葉が選ばれました
  1. Well（ウェル）
  • 「井戸」や「くぼみ」を意味します
  • ここでは「インクを含むことができる場所」という意味で使用されています
  • タッチした箇所から波紋が広がっていく様子を、井戸から水が広がっていくイメージに例えています

つまり、InkWellは「タッチした場所（Well）から、インクのような波紋（Ink）が広がっていく場所」という意味を持つウィジェット名となっています

ユーザーがタッチした時の反応が、まるで水面にインクを落としたときのように広がっていく様子を表現しています。

muranakarmuranakar

InkWellの主な特徴

  1. 基本機能
  • タッチ操作に反応するウィジェット
  • Material Designのインク（波紋）エフェクトを提供
  • 様々なジェスチャーイベントをハンドリング可能
  1. 主なコールバック
  • onTap: タップ時の処理
  • onLongPress: 長押し時の処理
  • onDoubleTap: ダブルタップ時の処理
  • onTapDown/onTapUp: タップの開始/終了時の処理
  1. カスタマイズ可能なプロパティ
  • splashColor: タップ時の波紋エフェクトの色
  • highlightColor: 押下時のハイライト色
  • hoverColor: ホバー時の色（Web/デスクトップ向け）
  • radius: 波紋エフェクトの広がり範囲
  1. 使用時の注意点
  • Material widgetの子孫である必要があります
  • 波紋エフェクトを表示するには、背景色が必要です
  • Containerと組み合わせる場合は、decorationではなくcolorプロパティを使用することを推奨