【Flutter】ColorFilteredのColorFilter.matrixを利用して画像に加算効果をかける実験

BlendModeになぜか加算モードがなかったので、ColorFilter.matrixを用いて加算効果のフィルターを作成してみました。


class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  ColorFilter customMultiplyColor(Color color) {
    // Normalize the color values to range from 0 to 1
    double red = color.red / 255;
    double green = color.green / 255;
    double blue = color.blue / 255;
    // Create a matrix to multiply the RGB values with the desired color
    return ColorFilter.matrix([
      1,0,0,red,0,
      0,1,0,green,0,
      0,0,1,blue,0,
      0,0,0,1,0,
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('assets/sample.png', width: 200, height: 200),
            ColorFiltered(
              colorFilter: customMultiplyColor(
                  Colors.blue), 
              child: Image.asset('assets/sample.png', width: 200, height: 200),
            ),
          ],
        ),
      ),
    );
  }
}

実行結果