【Flutter】リップルエフェクトを無効にする

リップルエフェクトってなに？

アクションがつく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を渡した際、ボタン内の要素が全て指定した色に統一されてしまうので、適宜色の指定する必要があります。

参考

デフォルトで無効にする方法

特定の箇所で無効にする方法

終わりに

もっと簡単な方法があったら教えてください〜