Question 171069 in Flutter Question posted in
The official Flutter documentation can be found here.

Can Network Images in Flutter be stripped of their transparent backgrounds?

I have to remove the transparent background and need to create a new image and successfully load the image

Here is my code

Please let me know how can I achieve this

Image.network(
  "https://i.pinimg.com/474x/ca/4c/6b/ca4c6be8d049a58b46f9a52b2d69d764.jpg",
 )
Tags:

2

Answers


  1. 0

    If you want to remove the transparent background from a Network Image in Flutter, you can use the color property available in the DecorationImage widget, which allows you to set a background color for the image. This will effectively fill any transparent areas with the color you choose.

    Here is an example of how you can implement this:

      Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('https://your-image-url.com'),
      colorFilter: new ColorFilter.mode(Colors.white, BlendMode.dstOver),
      fit: BoxFit.cover,
    ),
  ),
)

    In this code, ColorFilter.mode(Colors.white, BlendMode.dstOver) is being used to replace the transparent pixels in the image with white pixels. You can replace Colors.white with any color you’d like to use for the background.

    Note: The BlendMode.dstOver will display the destination image (the one beneath) over the source image (the one on top), which allows the color filter to work as a background. If you want the color filter to act as an overlay instead, use BlendMode.srcOver.

    Keep in mind that this solution won’t "remove" the transparent background, it will only cover it with a color of your choice. If you want to completely remove the transparent background of an image, you’ll have to do this outside Flutter, with a tool like Photoshop or GIMP, or using a server-side solution.

    Login or Signup to reply.
  2. 0

    To hide the transparent background, you simply need to place your Image.network widget into a Container. You can then color or shape the background the way you want.

    In your case however, the link of your image is NOT transparent background. The background has the same indication as a transparent background but its actually part of the image and not really transparent. A transparent image would need to be in .png or .gif format or other formats but not .jpg. A jpg image cannot maintain transparency of an image, you can read more about that here Transparent background in JPEG image

    This is how your image actually looks like, and it does NOT have a transparent background:

    enter image description here

    and this is an example of an image with a real transparent background: https://www.lunapic.com/editor/premade/transparent.gif

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search