[Flutter] DecorationImageのColorFilterで画像加工する

Flutterのアプリ開発で実装したことを記事にしました。
ColorFilterは、DecorationImageの画像の色味を変化させたいときに使います。

具体的には、下の画像の様にすることができます。

DecorationImageの画像にColorFilterを追加する

Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/test_image.jpg'),
                fit: BoxFit.cover,
                colorFilter: ColorFilter.mode(
                  Colors.white.withOpacity(0.2),
                  BlendMode.srcATop,
                ), // colorFilterを追加
              ),
            ),
          ),

ColorFilter.mode( Color color, BlendMode blendMode )

を変更すれば、画像に様々なフィルターをかけることをできますが、

BlendModeはバリエーションが多く、全ては理解できませんでした。

画像に指定した色を重ねるなら、BlendMode.srcATopがわかりやすと思います。

白黒写真の様にするには、

ColorFilter.mode(Colors.grey, BlendMode.saturation)

が使えます。

参考にしたサイト