FlutterでImageのcolorBlendModeを使ってpng画像に色をつける

ライトモードとダークモードの切り替えなど、同じ形の画像を、複数の色で表示したいことがあると思います。

そのときに、色ごとに画像ファイルを用意していませんか？ImageのcolorBlendModeを使うと、色毎に画像ファイルを用意する必要がなくなります。

↓こちらは、一つの画像ファイルで実現しています。

解説

ImageにcolorBlendModeとcolorを指定することで、画像に色をつけることができます。colorBlendModeにはBlendModeを指定します。

元の画像：

結果：先頭の画像のように、赤いチェックマークになります。

コード：

// 省略
            Image.asset(
              'assets/check.png',
              width: 64,
              height: 64,
              color: const Color(0xFFFF0000),
              colorBlendMode: BlendMode.srcIn,
            ),
// 省略

コード全体

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'hoge'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          children: [
            Image.asset(
              'assets/check.png',
              width: 64,
              height: 64,
              color: const Color(0xFFFF0000),
              colorBlendMode: BlendMode.srcIn,
            ),
            const SizedBox(height: 16),
            Image.asset(
              'assets/check.png',
              width: 64,
              height: 64,
              color: const Color(0xFF00FF00),
              colorBlendMode: BlendMode.srcIn,
            ),
            const SizedBox(height: 16),
            Image.asset(
              'assets/check.png',
              width: 64,
              height: 64,
              color: const Color(0xFF0000FF),
              colorBlendMode: BlendMode.srcIn,
            ),
            const SizedBox(height: 16),
          ],
        ),
      ),
    );
  }
}