波紋（インクリップル） Ink Ripple

押した場所から水面の波紋のように色が広がり、「押せた」ことを伝える Material の基本の反応。

別名: リップルエフェクトタップエフェクト押した時の波紋スプラッシュRipple EffectSplashInkWell
動き: 押した所から広がる色が付く
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます（初回は数秒かかります）

別タブで大きく開く ↗

どんなもの？

Material Design のボタンを押したときに出る、あの広がる色です。Flutter のボタンにはすべて最初から付いています。

自分で作った見た目に付けたいときは InkWell で包みます（親に Material が必要）。

枠からはみ出して丸く広がる InkResponse は、アイコンボタンのような小さな物向きです。

広がり方は splashFactory で変えられ、Material 3 の既定は Android アプリでは InkSparkle（キラキラした波紋）、

Web や iOS では InkRipple です。NoSplash.splashFactory にすると波紋が出なくなります。

こんなときに

自作のカードや行を、ボタンらしく押せるようにしたい

避けたい場面

iOS らしさを強く出したいアプリ（iOS は波紋ではなく、押すと薄くなる反応が普通）

最小コード

Material(
  color: Colors.white,
  borderRadius: BorderRadius.circular(16),
  clipBehavior: Clip.antiAlias, // 波紋を角丸の内側に収める
  child: InkWell(
    onTap: open,
    splashFactory: InkRipple.splashFactory, // InkSparkle / NoSplash なども
    child: const Padding(padding: EdgeInsets.all(24), child: Text('カード')),
  ),
)

// アプリ全体で波紋を消す
ThemeData(splashFactory: NoSplash.splashFactory)

使うウィジェット

InkWellInkResponseInkRippleInkSparkleInkSplashNoSplash

似ているもの・一緒に見たいもの

触ってみる ↗

ボタンボタンの種類Button Styles

塗り・トーナル・浮き・枠線・文字だけ、の5段階の目立ち方があり、操作の重要さに合わせて使い分ける。

押すと波紋

触ってみる ↗

ボタンホバーで変わるHover Effect

PC でマウスを乗せると、カードが少し浮き上がって色が変わり、カーソルが指の形になる。押せることが伝わる。

マウスを乗せると浮く