[Flutter]アイコン(Icon)の透明度(opacity)を指定するには？

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

アイコンの透明度を指定する方法を紹介します。

方法

アイコンの透明度を指定するには、Opacityウェジェットを使います。

まず、IconウェジェットをOpacityのchildに指定します。

Opacity(
 child: Icon(/*アイコン*/),
),

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

引数「opacity」の値が0に近づくほど透明になり、1に近づくほど不透明になります。

Opacity(
  opacity: /*透明度(0~1)*/,
  child: Icon(Icons.flutter_dash),
)

これでアイコンの透明度を指定することが出来ます。

以下は、使用例です。

使用例

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