[Flutter]ElevatedButtonにリップルエフェクトを追加する方法

どうも、ちょげ(@chogetarou)です。

ElevatedButtonにリップルエフェクトを追加する方法を紹介します。

方法

ElevatedButtonにリップルエフェクトを付けるには、まず引数「style」にElevatedButton.styleFromを指定します。

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(),
)

次に、ElevatedButton.styleFromの引数「splashFactory」に、「InkRipple.splashFactrory」を指定します。

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    splashFactory: InkRipple.splashFactory,
  ),
)

ここまででリップルエフェクトが追加されます。

後は、ElevatedButton.styleFromの引数「onPrimary」で、リップルエフェクトの色を指定します。

また、「onPrimary」では、テキストの色も変わってしまうので、テキストの色も指定します。

ElevatedButton(
  onPressed: () {},
  child: Text(
    'Button',
    style: TextStyle(color: Colors.white),
  ),
  style: ElevatedButton.styleFrom(
    splashFactory: InkRipple.splashFactory,
    onPrimary: Colors.pink,
  ),
)

まとめ

ElevatedButtonにリップルエフェクトを追加するには、まず「ElevatedButton」に引数「style」にElevatedButton.styleFromを指定します。

そして、ElevatedButton.styleFromの引数「splashFactroy」に、「InkRipple.splashFactory」を指定します。

また、リップルエフェクトの色は、「onPrimary」で指定します。