[Flutter]Containerの背景画像(background image)の透明度(opacity)を変えるには？

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

Containerの背景画像の透明度を変える方法を紹介します。

前提

BoxDecorationで既に画像が設定しているのを前提としています。

関連 >>> [Flutter]Containerの背景に画像を表示するには？

方法

Containerの背景画像の透明度を変えるには、DecorationImageの引数「colorFilter」を使います。

まず、DecorationImageの引数「colorFilter」にColorFilterを指定します。

そして、ColorFilterの引数に、Colors.whiteとBlendMode.dstATopを設定します。

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      colorFilter: ColorFilter.mode(
        Colors.white,
        BlendMode.dstATop,
      ),
      image: /*画像*/,
    ),
  ),
),

最後に、Colors.whiteの後ろに「.withOpacity()」を付けます。

この「withOpacity」の引数に「０〜１」の値で透明度を設定します。

値が0に近づくほど透明になり、逆に1に近づくほど不透明になります。

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      colorFilter: ColorFilter.mode(
        Colors.white.withOpacity(/*透明度（０〜１）*/),
        BlendMode.dstATop,
      ),
      image: /*画像*/,
    ),
  ),
),

これで画像の透明度を変えることが出来ます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            //通常
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(
                    'https://cdn.pixabay.com/photo/2016/01/19/17/41/friends-1149841__340.jpg',
                  ),
                ),
              ),
              width: 250,
              height: 250,
            ),
            //透明度あり
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  colorFilter: ColorFilter.mode(
                    Colors.white.withOpacity(0.5),
                    BlendMode.dstATop,
                  ),
                  image: NetworkImage(
                    'https://cdn.pixabay.com/photo/2016/01/19/17/41/friends-1149841__340.jpg',
                  ),
                ),
              ),
              width: 250,
              height: 250,
            ),
          ],
        ),
      ),
    );
  }