【Flutter】リップルエフェクトをつけたい

アプリ開発をするなかで、ボタンを押した時にエフェクトをつけたいことはないだろうか。よくあるボタンウィジェットの「TextButton」や「ElavatedButton」なんかは特に設定しなくても押した時のエフェクトが付いている。しかし画像をボタンにしたりする場合はこれらを使用することはできない。この記事では、そういった時のエフェクトの付け方についてまとめておこうと思う。

リップルエフェクトとは
エフェクトの付け方
他のオプション
まとめ

リップルエフェクトとは

Flutterでボタンを押下時の主要なエフェクトにリップルエフェクトというものがある。このリップルエフェクトとは、水たまりに水滴を垂らした時の波紋のようなエフェクトを指していて、これをボタン押下時につけることができる。（語彙力）実際に押した動画は以下。

エフェクトの付け方

下記の各種ボタンウィジェットの時に紹介したが、InkWellを使用すればエフェクトをつけることができる。

【Flutter】アイコン・画像・テキストをボタンにしたい

Flutterでは標準で様々なButtonウィジェットが存在している。ボタンではなくてアイコンであったり、画像、テキストをタップした時に、何かしらの機能を実装したい場合について、その使い方やイメージをこの記事にまとめておこうと思う。

上の動画は下記のようなコードで実装可能。ここで注意したいのは、onTapをつけないとリップルエフェクトが表示されないので、何かしら設定すること。（ここでは、コンソール上へのprint文）

Center(
        child: InkWell(
          onTap: (){
            print("effect!!!");
          },
          child: Icon(Icons.account_circle, size: 100,),
          ),
)

これでエフェクトが付いているはずなので、確認してみてほしい。

他のオプション

よくある設定では、リップルエフェクトの色を変化させることがあるので、その場合の設定方法について示す。

Center(
        child: InkWell(
          splashColor: Colors.red,
          onTap: (){
            print("effect!!!");
          },
          child: Icon(Icons.account_circle, size: 100,),
          ),
)

このコードを実行すると、先ほどはグレーっぽいリップルエフェクトが赤になっていることが確認できるだろう。

まとめ

今回はリップルエフェクトの付け方に付いてまとめた。少し細かいことではあるけれど、こういうものの積み重ねがアプリの質をグッと引き上げると思うので、しっかりと抑えておきたい。（何でもかんでもつけるとうるさいアプリになるので注意）