Flutter Image Colouring

Question

I am trying to color the image with different colors. I am taking two images one is in PNG format and another one is in SVG format. I am taking a list of color and when the user taps on the color from the color list, the color of an image will change. I am using the image with different color. What I want is the image should preserve last red color it didn't override it? Here is my code and image sample also.

SVG image link of SVG image

import 'package:flutter/material.dart';
    import 'package:flutter_svg/flutter_svg.dart';
    void main() => runApp(new MaterialApp(
          home: new ColorPicker(),
          debugShowCheckedModeBanner: false,
        ));

class ColorPicker extends StatefulWidget {
  ColorPickerState createState() => ColorPickerState();
}

const List<Color> mainColors = const <Color>[
  Colors.black,
  const Color(0xFF980000),
  const Color(0xFFFF0000),
  const Color(0xFFFF9900),
  const Color(0xFFFFFF00),
  const Color(0xFF00FF00),
  const Color(0xFF00FFFF),
  const Color(0xFF4A86E8),
  const Color(0xFF0000FF),
  const Color(0xFF9900FF),
  const Color(0xFFFF00FF),
];
Color selectedColor;

class ColorPickerState extends State<ColorPicker> {
  void onColorSelected(Color color) {
    setState(() {
      selectedColor = color;
    });
  }

  void onColorclear(Color color) {
    setState(() {
      selectedColor = null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('data'),
      ),
      body: new Center(
          child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new RaisedButton(
            child: new Text('reset'),
            onPressed: () => onColorclear(selectedColor),
          ),
          new Divider(height: 10.0,),
          SingleChildScrollView(
            child: new Row(children: _mainColors(context)),
            scrollDirection: Axis.horizontal,
          ),
          new SizedBox(
            height: 200.0,
            width: 200.0,
            child: new Image.asset(
              'assets/ABCD.png',
              color: selectedColor,
              colorBlendMode: BlendMode.modulate,
            ),
          ),
          AspectRatio(
            aspectRatio: 1.5,
            child: new SvgPicture.asset(
              'assets/ABC.svg',
              color: selectedColor,
              colorBlendMode: BlendMode.modulate,
            ),
          ),
        ],
      )),
    );
  }

  List<Widget> _mainColors(BuildContext context) {
    var children = <Widget>[];
    for (Color color in mainColors) {
      children.add(InkWell(
        onTap: () => onColorSelected(color),
        child: new Container(
            height: 20.0,
            width: 70.0,
            decoration: BoxDecoration(
              color: color,
            )),
      ));
    }
    return children;
  }
}

Answer 1

You can use Color.lerp(colorA, colorB, interpolation) to mix two Colors. For your use case, the previously mixed color can be stored so it can be mixed with the next selected color. I've modified two of your methods to demonstrate this.

Color mixedColor, previousColor;
void onColorSelected(Color colorSelected) {
  if (previousColor == null)
    // store current color if there's no previous color
    previousColor = colorSelected;
  else
    // if there's a previous color, mix with current selected color
    mixedColor = Color.lerp(previousColor, colorSelected, 0.5);
  print(
      'Color prev: $previousColor current: $currentColor mixed: $mixedColor');
  setState(() {
    if (mixedColor != null) {
      colorSelected = mixedColor;
      // store mixed color as previous color so it can be mixed
      // with the next selected color
      previousColor = mixedColor;
    }
    currentColor = colorSelected;
  });
}

Adding color to the SVG image doesn't seem to work on my end though, but this seems to be a different issue.

Demo