[Flutter]Container自体の透明度(opacity)を変えるには？

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

Container自体の透明度を変える方法を紹介します。

方法

Container自体の透明度を変えるには、Opacityウェジェットを使います。

まず、ContainerをOpacityの「child」に指定します。

Opacity(
  child: Container(),
),

そして、Opacityの引数「opacity」に透明度を０〜１で指定します。

引数「opacity」に指定する透明度は、0に近づくほど透明になり、1に近づくほど不透明になります。

Opacity(
  opacity: /*透明度(0~1)*/,
  child: Container(),
),

これでContainer自体の透明度を変えることが出来ます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Opacity(
              opacity: 0.25,
              child: Container(
                color: Colors.blue,
                height: 200,
                width: 200,
              ),
            ),
            Opacity(
              opacity: 0.5,
              child: Container(
                color: Colors.blue,
                height: 200,
                width: 200,
              ),
            ),
            Opacity(
              opacity: 0.75,
              child: Container(
                color: Colors.blue,
                height: 200,
                width: 200,
              ),
            ),
          ],
        ),
      ),
    );
  }