【flutter】画像をマスクで1色にしたり、グラデーションカラーにしたりする

はじめに

flutterでpngやjpg画像をマスクで1色にしたり、グラデーションカラーにしたりするコードを書いたのでここにおいておきます

動作確認

使った画像

1色にする

Image.asset(
              'assets/images/tree.png',
              color: Colors.purple.shade100,
            ),

グラデーションにする

 ShaderMask(
              shaderCallback: (Rect bounds) {
                return const LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  stops: [
　　　　　　　　　　　　　　　　　　　　　　         0.0,
                    0.4,
                    0.8,
                  ],
                  colors: <Color>[
                    Color.fromARGB(255, 212, 176, 255),
                    Color.fromARGB(255, 223, 152, 241),
                    Color.fromARGB(255, 241, 108, 208)
                  ],
                  tileMode: TileMode.mirror,
                ).createShader(bounds);
              },
              child: Image.asset(
                'assets/images/tree.png',
                color: Colors.white,
              ),
            ),

斜めのグラデーションにしたり、グラデーションの数を変更したりすることも出来ます。
画像以外にも、iconやtextにもマスクを付けることが可能なようです。

参考

https://www.kamo-it.org/blog/gradation_icon/