【Flutter】ColorFilteredで画像の色彩変更

まえがき

Flutterを2020年初めから勉強始めていろいろパッケージやWidgetを使ってみています。

ColorFiltered

これは入れ子にcolorFilterをかけられるWidgetです。

こんな感じに、画像の色を変えられます。

上の段はただの普通に画像表示をしました。
右の真っ赤な画像は、Image.asset()のcolorで画像を指定しました。

下の段からColorFilteredを使った画像です。

ColorFiltered(
  colorFilter:
      ColorFilter.mode(Colors.green, BlendMode.colorBurn),
  child: Image.asset('images/sample1.png'),
),

このようなコードで、表示することができます。

ColorFilter.modeのなかで、フィルターをかける色と、BlendModeでどのようにフィルターをかけるか決めます。

BlendModeはこちらの記事を参考にさせていただきました。
https://qiita.com/ko2ic/items/77521e4344f3bd73d326

ソースコード

今回作ったコードのソースコードも一応載せておきます。

import 'package:flutter/material.dart';

class SampleColorFlitered extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _SampleColorFlitered();
}

class _SampleColorFlitered extends State<SampleColorFlitered> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ColorFlitered'),
      ),
      body: Center(
        child: Table(
          // defaultColumnWidth: FlexColumnWidth(1),
          defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
          children: [
            TableRow(
              children: [
                Image.asset('images/sample1.png'),
                SizedBox(),
                Image.asset(
                  'images/sample1.png',
                  color: Colors.red,
                ),
              ],
            ),
            TableRow(
              children: [
                Text('ただの画像'),
                SizedBox(),
                Text('画像の色変更'),
              ],
            ),
            TableRow(
              children: [
                ColorFiltered(
                  colorFilter:
                      ColorFilter.mode(Colors.green, BlendMode.colorBurn),
                  child: Image.asset('images/sample1.png'),
                ),
                ColorFiltered(
                  colorFilter: ColorFilter.mode(Colors.green, BlendMode.lighten),
                  child: Image.asset('images/sample1.png'),
                ),
                ColorFiltered(
                  colorFilter:
                      ColorFilter.mode(Colors.green, BlendMode.modulate),
                  child: Image.asset('images/sample1.png'),
                )
              ],
            ),
            TableRow(
              children: [
                Text('BlendMode.\ncolorBurn)'),
                Text('BlendMode.\nlighten'),
                Text('BlendMode.\nmodulate'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}