Flutterで白背景のアイコンの色を変更する

背景

フリー素材で「はなまる」の画像を取得した。ただ、この画像は白背景で、「はなまる」自体は黒。画像ソフトで編集できると思うが、色の調整が楽になるので、Flutterだけで操作したい。

画像

もと画像

欲しい画像

ソース

Image.asset(
      'assets/images/maru.png',
      fit: BoxFit.fitHeight,
      color: Colors.red,
      colorBlendMode: BlendMode.lighten,
    );

BlendMode.lightenでブレンドする。
colorで画像の上に赤い四角が合成される。lightenだと明るいところが取得できる。
もと画像は、背景は白(明るい)、本体(暗い）ので、背景は白いまま、本体は赤い四角が優先される。そのため、「はなまる」が赤くなる。

参考

BlendModeについて

余談

理屈が分かると簡単だが、結構検証に時間がかかりましたorz
はなまるを平仮名で書いた方が良い気がするのは、某うどん屋の影響か、某幼稚園の影響か。