marvin ralph
marvin ralph

Reputation: 1280

How To Create A Filtered Image In Flutter

I am trying to create an image filter, what i want to know is, is it possible to apply a color filter to an image and then save that image with the color filters applied ? If yes then how. Right now I have been able to apply the color filter to an image using the following code. But what is want is to save that image and have it display with the color filter.

Container(
  child: Stack(
    children: <Widget>[
      ColorFiltered(
        colorFilter: ColorFilter.mode(Colors.black87, BlendMode.color),
          child: Image(
            image: FileImage(
              this.images[index]
             ),
          ),
        ),
      )
    ]
  )
);

What is want is some kind of a function like this, which convert the original image to the one with the color filter applied on it.

void transformImage(String path) {
   // do something here ...
}

Upvotes: 2

Views: 4320

Answers (1)

bpedazur
bpedazur

Reputation: 381

Using the Image widget you can do all sorts of manipulations.

    import 'dart:io';
    import 'package:image/image.dart';
    void main() {
      // Create an image
      Image image = Image(320, 240); // You can also load an image here
      
      // Fill it with a solid color (blue) OR add color filter
      fill(image, getColor(0, 0, 255));
      
      // Draw some text using 24pt arial font
      drawString(image, arial_24, 0, 0, 'Hello World');
      
      // Draw a line
      drawLine(image, 0, 0, 320, 240, getColor(255, 0, 0), thickness: 3);
      
      // Blur the image
      gaussianBlur(image, 10);
      
      // Save the image to disk as a PNG
      File('test.png').writeAsBytesSync(encodePng(image));
    }

Upvotes: 7

Related Questions