ホバーで変わる Hover Effect
PC でマウスを乗せると、カードが少し浮き上がって色が変わり、カーソルが指の形になる。押せることが伝わる。
本物の Flutter ウィジェットが動きます（初回は数秒かかります）
どんなもの？
Web や PC 向けアプリで「ここは押せる」と伝える反応です。スマホには「乗せる」操作がないので起きません。
MouseRegion の onEnter / onExit で乗っているかを覚え、AnimatedContainer で影・位置・色をなめらかに変えます。
cursor: SystemMouseCursors.click で、カーソルを指の形にできます。
単に色を変えるだけなら、InkWell の onHover や ButtonStyle の hovered 状態を使う方法もあります。
こんなときに
- Web・PC 向けアプリのカードやリンク
避けたい場面
- ホバーでしか見えない情報や操作を作る（スマホでは見られない）
最小コード
MouseRegion(
cursor: SystemMouseCursors.click,
onEnter: (_) => setState(() => hover = true),
onExit: (_) => setState(() => hover = false),
child: AnimatedContainer(
duration: const Duration(milliseconds: 180),
transform: Matrix4.translationValues(0, hover ? -6 : 0, 0), // 浮き上がる
decoration: BoxDecoration(
color: hover ? Colors.indigo.shade50 : Colors.white,
boxShadow: [BoxShadow(blurRadius: hover ? 18 : 4, color: Colors.black26)],
),
child: const ListTile(title: Text('デザイン')),
),
)使うウィジェット
MouseRegionAnimatedContainerSystemMouseCursors