0

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",
 )
Tejaswini Dev
  • 1,311
  • 2
  • 8
  • 20
  • I dont understand. You want to remove the Image.network widget? you can wrap it in opacity widget for that. or do you want to change the string? – Texv May 18 '23 at 07:58
  • I need to remove the transparent background which is present in Network Image – Tejaswini Dev May 18 '23 at 07:59

2 Answers2

1

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

Texv
  • 1,225
  • 10
  • 14
  • I have tried with png format also it's not working. Here is the url https://png.pngtree.com/element_our/png/20180810/cartoon-cute-brown-bear-hug-design-map-png_57275.png – Tejaswini Dev May 18 '23 at 10:09
  • This image is in png format yes, but the image itself is not transparent – Texv May 18 '23 at 10:12
  • The uploader either used the wrong tool to upload it, or did it on purpose for copyright purposes, to let people buy/download or ask them for the main file source – Texv May 18 '23 at 10:13
  • try my link example in my answer and you will see the difference :) – Texv May 18 '23 at 10:14
-1

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.

Ali Moussa
  • 11
  • 3