リップルエフェクトってなに？
アクションがつくWidgetを長押しした時に出てくる波紋あるじゃないですか？？
あれです。
でも、リップルエフェクトが不要の場合ってありますよね。
と言うわけで、今回はリップルエフェクトを無効にする方法を3パターンご紹介します！
なぜ出てくる？？
マテリアルデザインにデフォルトで搭載されている機能みたい。
基本的に、アクションがついているWidgetに有効になっている機能のように思います。
プロジェクト全体でリップルエフェクトを無効にする方法
ひとつ目は、プロジェクト全体でリップルエフェクトが不要な際、
デフォルトでリップルエフェクトを無効にする方法です。
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
splashColor: Colors.transparent, //ThemeDataのsplashColorを透明にする
),
home: const Test(),
);
ThemeDataのsplashColorに対して、Colors.transparentを渡してあげることで、
リップルエフェクトを無効にすることが可能です！
注意！！
リップルエフェクトをデフォルトで持つWidgetは数多くありますが、
上記の対応でできるのは、パラメータにsplashColorを持つWidgetのみになります！
特定のWidgetのリップルエフェクトを無効にする方法
ふたつ目は、特定のWidgetに対してリップルエフェクトを無効にするパターンです。
これが厄介で、Widgetによって以下の二つの方法を使い分けないといけません。
1. アクションを持たないWidgetで代用できる場合
以下のコードでTextButtonを表示させていますが、
TextButtonは、ThemeDataでリップルエフェクトを無効にさせる方法では対応できないWidgetとなっています。
TextButton(
onPressed: () {},
child: const Text('Text Button'),
),
このコードを、InkWellでラップして、splashColorにColors.transparentを渡してあげます！
さらに、TextButtonを使用しているところ、アクションについてはInkWellに持たせ、子要素にTextを代用するようにします。
InkWell(
onTap: (){},
splashColor: Colors.transparent, // splashColorを透明にする。
child: const Text('Text Button'),
),
こうすることで、リップルエフェクトを無効にすることができます！
2. アクションを持たないWidgetで代用できない場合
初めに言っておきますが、自作でボタンを作れば、アクションを持たないWidgetへ代用することは可能です。
ただそんなことするよりも、元のWidgetを崩さない方法があればいいですよね。
その方法がこちらになります。
以下のコードで、ElevatedButtonを表示させています。
ElevatedButton(
onPressed: () {},
child: const Text(
'ElevatedButton',
),
),
Widgetのstyleタグに、{Widget}.styleFromを渡し、onPrimary(もしくはprimary)に対して、背景色と同色を渡してあげます！
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(onPrimary: Colors.blue), //背景色と同色にする。
child: const Text(
'ElevatedButton',
style: TextStyle(color: Colors.black), // 文字色を指定する。
),
),
これでリップルエフェクトが無効にできました！！
primaryに対してColorを渡した際、ボタン内の要素が全て指定した色に統一されてしまうので、適宜色の指定する必要があります。
参考
デフォルトで無効にする方法
特定の箇所で無効にする方法
終わりに
もっと簡単な方法があったら教えてください〜