How to change image color?

Question

How to change image color ?

original image :

expect :

code :

Center(
    child: Container(
      height: 181.0,
      width: MediaQuery.of(context).size.width - 46.0,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.0),
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color(0xFFB3E2D6),
            Color(0xFF18A2A5).withOpacity(0.5),
          ],
        ),
      ),
      child: Stack(
        children: [
          Positioned(
            right: -20,
            bottom: 0,
            top: 0,
            child: Image.asset(
              'assets/images/border_background.png',
              width: 220,
              height: 220,
              fit: BoxFit.cover,
            ),
          ),
          Positioned(
            right: -5,
            bottom: 0,
            top: 0,
            child: Image.asset(
              'assets/images/lisa-removebg-preview.png',
              height: 151,
              width: 207,
              fit: BoxFit.cover,
              color: Color(0xFF7CD2CC), colorBlendMode: BlendMode.modulate,
            ),
          )
        ],
      ),
    ),
  ),

actual :

i try create some widget and change image color in widget. but, not same with expectation

could you help me to fix some problem on this design?

Answer 1

For this you can use the ColorFilitered widget.

Without ColorFilter

Image.network("https://myImage"),

output:

With ColorFilter

ColorFiltered(
      colorFilter:
          ColorFilter.mode(Colors.teal.withOpacity(0.7), BlendMode.color),
      child: Image.network(
        "https://myUrl",
      ),
    );

output:

You can change the Color with its opacity as you can see and also the Blendmode, more on Blendmodes here