[Flutter]Containerにリップルエフェクトをつけるには？

Flutter

2021.11.04

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

Containerにリップルエフェクトをつける方法を紹介します。

方法

Containerにリップルエフェクトをつけるには、InkWellウェジェットを使います。

まず、ContainerをInkWellのchildに指定します。

そして、InkWellの引数「onTap」に関数、引数「splashColor」にリップルエフェクトの色を指定します。

InkWell(
  onTap: () {},
  child: Container(),
  splashColor: /*リップルエフェクトの色*/,
),

最後に、Containerの色に、Colors.transparentもしくは透明度の高い色を指定します。

InkWell(
  onTap: () {},
  child: Container(
    color: /*Colors.transparentもしくは透明度の高い色*/,
  ),
  splashColor: /*リップルエフェクトの色*/,
),

これでContainerでリップルエフェクトを使うことが出来ます。

InkWellのリップエフェクトは、Containerの色で上書きされて見えません。

なので、色に透明色である「Colors.tranparetn」もしくは透明度の高い色を指定します。

透明度は、Colorsの後ろにwithOpacity(/*透明度*/)をつけることで、設定できます。（withOpacityの透明度は０〜１の値）

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            InkWell(
              onTap: () {},
              child: Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                  color: Colors.blue.withOpacity(0.3),
                ),
              ),
              splashColor: Colors.pink,
            ),
          ],
        ),
      ),
    );
  }