Flutter 背景色ありで Ripple Effect を効かせる

FlatButton, RaisedButton, MaterialButton, InkWell, InkResponse など、Ripple Effect を表示してくれる Widget を使った時に、child が背景色を持っているとエフェクトが表示されません。

Ripple Effect は背景色の効果なので、その効果を描画する Widget の上に、不透明な背景色を持つ Widget が child として乗っていると、それに隠されてエフェクトが表示されないためです。

背景色を設定したい場合は、FlatButton, RaisedButton, MaterialButton の場合はコンストラクタの color を設定し、child 側には設定しないようにしましょう。

さて、デザインの都合上、これらの Button のカスタマイズ性で不足する場合は、よりプリミティブな InkWell, InkResponse を使うことがあります。これらの Wiget は color プロパティを持たないので、それをラップして背景色を設定します。

例:

new Material(
  type: MaterialType.button,
  color: Colors.red.shade500,
  child: new InkWell(
    highlightColor: Colors.red.shade300,
    splashColor: Colors.red.shade100,
    onTap: yourOnTapCallback,
    child: yourWidget,
  );
);

Ripple Effect は ツリーに Material を要求するので、この例では親を Material にしています。

この記事はQiitaの記事をエクスポートしたものです