[Flutter] RaisedButtonでタップ時のアニメーションを保持したグラデーションボタンを作る

mayatasomayataso

RaisedButtonでグラデーションボタン作ろう！と思ったら、まず思いつく構成が多分これ。

RaisedButton(
  onPressed: () {},
  child: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.black, Colors.transparent],
      ),
    ),
    child: const Text('button')
  ),
);

RaisedButtonの中にContainerを用意し、decorationを使ってグラデーション背景を作れる。

ただ、このやり方だとボタンの上にグラデーションタイルを乗っけてしまっているため、ボタンをタップしたときに波紋状に広がるアニメーションが機能しない(隠れてしまう)。

アニメーションを表示するためには、Inkウィジェットが使える。

RaisedButton(
  onPressed: () {},
  child: Ink(
    decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.black, Colors.transparent],
        ),
      ),
    child: Container(
      child: const Text('button')
    ),
  ),
);

正確にはRaisedButtonのRippleアニメーションをInkウィジェットで代替する形になる。