👻
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の記事をエクスポートしたものです
Discussion