[Flutter]Containerの背景画像を白黒にするには？

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

Containerの背景画像を白黒にする方法を紹介します。

方法

Containerの背景画像を設定するには、DecorationImageのcolorFilterを使います。

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

そして、ColorFilterの引数に「Colors.white」と「BlendMode.saturation」を指定します。

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

これで画像を白黒にすることが出来ます。

以下は、使用例です。

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      colorFilter:
          ColorFilter.mode(Colors.white, BlendMode.saturation),
      image: NetworkImage(
        'https://cdn.pixabay.com/photo/2016/01/19/17/41/friends-1149841__340.jpg',
      ),
    ),
  ),
  width: 250,
  height: 250,
),