How to Change Color of an Image in Flutter

The images come with predefined colors. Sometimes, we may need to tweak the color. In this Flutter tutorial, let’s discuss how to change the color of an image.

To change the color of an image, I prefer ColorFiltered widget of Flutter. It accepts colorFilter property which changes the color filter of the child. In this Flutter example, we are changing the color of the following image.

We change the color of the above image to red using ColorFiltered widget. See the code below.

import 'package:flutter/material.dart';



class ColorFilterExample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorials',
      home: Main()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class Main extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Change Image Color'),
      ),
      body: Center(
        child: ColorFiltered(
          child:Image.network(
                      "https://cdn.pixabay.com/photo/2019/12/14/07/21/mountain-4694346_960_720.png",
                    ),
          colorFilter: ColorFilter.mode(Colors.red, BlendMode.color),
        
      ),
      ),
    );
  }
}

And this Flutter example gives the following output.

You can change BlendMode to get different configurations while changing the color. Also note that, the ColorFiltered widget can be used to change the colors of widgets other than images too.

Leave a Comment

Your email address will not be published. Required fields are marked *