2021/3/11 : Flutter : ColorFilteredウィジェットについて

BlendModeについてはこちらをご覧ください。

//スタート地点
import 'package:flutter/material.dart';
void main(){
  return runApp(MaterialApp(home:MyApp(),),);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child:Column(
          children: [

            Image.asset(
              'assets/images/diamond.png',
              height:100,
            ),

            LogoWidget(),

            TextWidget(),

            IconWidget(),

          ],
        ),
      ),
    );
  }
}

class LogoWidget extends StatelessWidget {
  Widget build(BuildContext context) => Container(
    margin: EdgeInsets.symmetric(vertical: 10),
    child: FlutterLogo(
      size:100,
    ),
  );
}

class TextWidget extends StatelessWidget {
  Widget build(BuildContext context) => Container(
    margin: EdgeInsets.symmetric(vertical: 10),
    child: Text(
      "テスト用文字列",
    ),
  );
}

class IconWidget extends StatelessWidget {
  Widget build(BuildContext context) => Container(
    margin: EdgeInsets.symmetric(vertical: 10),
    child: Icon(
      Icons.file_copy,
    ),
  );
}

//ImageをColorFilteredでラップする。 
       //...
       child:Column(
          children: [
            ColorFiltered(
              colorFilter:ColorFilter.mode(
                Colors.green,
                BlendMode.modulate,
              ),
              child: Image.asset(
                'assets/images/diamond.png',
                height:100,
              ),
            ),

            LogoWidget(),
            //...

//LogoWidgetをColorFilteredでラップ
//...
        child:Column(
          children: [
            Image.asset(
              'assets/images/diamond.png',
              height:100,
            ),

            ColorFiltered(
                child: LogoWidget(),
              colorFilter:ColorFilter.mode(
                Colors.yellow,
                BlendMode.modulate,
              ),
            ),

            TextWidget(),
//...

多分文字とアイコンの色が黒だから色がつかないと思われる。

//TextWidgetとIconWidgetをColorFilteredでラップしたが、色が変わらない。
           ColorFiltered(
              child: TextWidget(),
              colorFilter: ColorFilter.mode(
                Colors.green,
                BlendMode.modulate,
              ),
            ),
            ColorFiltered(
              child: IconWidget(),
              colorFilter: ColorFilter.mode(
                Colors.green,
                BlendMode.modulate,
              ),
            ),

TextとIconのcolorをwhiteにしたら色がついた。

import 'package:flutter/material.dart';

void main() {
  return runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Image.asset(
              'assets/images/diamond.png',
              height: 100,
            ),
            LogoWidget(),
            ColorFiltered(
              child: TextWidget(),
              colorFilter: ColorFilter.mode(
                Colors.green,
                BlendMode.modulate,
              ),
            ),
            ColorFiltered(
              child: IconWidget(),
              colorFilter: ColorFilter.mode(
                Colors.green,
                BlendMode.modulate,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class LogoWidget extends StatelessWidget {
  Widget build(BuildContext context) => Container(
        margin: EdgeInsets.symmetric(vertical: 10),
        child: FlutterLogo(
          size: 100,
        ),
      );
}

class TextWidget extends StatelessWidget {
  Widget build(BuildContext context) => Container(
        margin: EdgeInsets.symmetric(vertical: 10),
        child: Text(
          "テスト用文字列",
          style:TextStyle(
            color:Colors.white,//←colorを変更。
            fontSize:50,
            fontWeight:FontWeight.bold,
          ),
        ),
      );
}

class IconWidget extends StatelessWidget {
  Widget build(BuildContext context) => Container(
        margin: EdgeInsets.symmetric(vertical: 10),
        child: Icon(
          Icons.file_copy,
          color:Colors.white,//←colorを変更。
        ),
      );
}

Column自体をColorFilteredでラップ。いっぺんに全部グレイにできる。

return Scaffold(
  body: Center(
    child: ColorFiltered(
      colorFilter: ColorFilter.mode(
        Colors.grey,
        BlendMode.modulate,
      ),
      child: Column(
        children: [
          Image.asset(
            'assets/images/diamond.png',
            height: 100,
          ),
          LogoWidget(),
          TextWidget(),
          IconWidget(),
        ],
      ),
    ),
  ),
);