In the spirit of learning, I studied the ColorFilter inside flutter. Learning is to draw inferinferies from one another. By expanding my thinking, I made this function into a simple picture filter effect. (PS: The image is a bit out of control and a bit long)

ColorFilter introduction

Two ways to use it

const ColorFilter.mode(Color color, BlendMode blendMode)
const ColorFilter.matrix(List<double> matrix)
Copy the code

The first approach is to create a MorningPainter class that inherits CustomPainter and defines three variables that are passed in

ui.Image img;
Color color;
String mode;
MorningPainter(this.img, this.color, this.mode);

@override
void paint(Canvas canvas, Size size) {
   var paint = Paint();
    if(color ! = Colors.white) { BlendMode blendMode = BlendMode.clear;switch (mode) {
        case 'modulate':
          blendMode = BlendMode.modulate;
          break;
        case 'difference':
          blendMode = BlendMode.difference;
          break;
        case 'plus':
          blendMode = BlendMode.plus;
          break;
        case 'lighten':
          blendMode = BlendMode.lighten;
          break;
        default: } paint.colorFilter = ColorFilter.mode(color, blendMode); }}@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
Copy the code

Select the picture

Use wechat_assets_picker to select images and then convert them. This place can focus on my other article, the Flutter puzzle game and then load as follows: Introduce them where needed

CustomPaint(
  size: Size(_img.width.toDouble(), _img.height.toDouble()),
  painter: MorningPainter(_img, currentColor, mode),
)
Copy the code

layout

The color selection and mode selection at the bottom are nothing to write home about, just use a simple SingleChildScrollView with Row. Post one of the codes

SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                renderItem(Colors.yellow, 'yellow'),
                renderItem(Colors.red, 'red'),
                renderItem(Colors.blue, 'blue'),
                renderItem(Colors.pink, 'pink'),
                renderItem(Colors.orange, 'orange'),
                renderItem(Colors.brown, 'brown'),
                renderItem(Colors.grey, 'grey'),,),),Copy the code

Finally thinking, learning is a very interesting thing, especially to apply the knowledge learned, a strong sense of achievement.