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

Flutter not rendering color for transparent background png icon

As I am very much new to the front-end world, I am not sure when I download the png from flaticon website such as https://www.flaticon.com/free-icon/telescope_3480961?related_id=3480961&origin=search I see telescope with colors, but when I use it with in Flutter using ImageIcon

        Container(
          height: 150,
          width: 150,
          color: Theme.of(context).colorScheme.background,
          child: const ImageIcon(
            AssetImage('assets/images/telescope.png'),
            size: 150,
          ),
        ),

The image shows entirely black. I understand this png has a transparent background but why is Flutter not rendering the colours that came with the png? I am sure I am making a mistake but not sure how to resolve this.

The icon is looking like this.

enter image description here

Tags:

2

Answers


  1. 0

    If you want to show and image from your assets you need Image.asset, so instead of ImageIcon, use Image.asset:

    child: Image.asset(
  'assets/images/telescope.png',
   height: 150,
   width: 150,
)

    enter image description here

    Login or Signup to reply.
  2. 0

    You can use assets image using Image.asset widget like this just remove ImageIcon widget from your code. also make sure you added assets path in pubsec.yaml file.

    Container(
    height: 150,
    width: 150,
    color: Theme.of(context).colorScheme.background,
    child: Image.asset('assets/images/telescope.png'),
 )

    Assets path in pubspec.yaml file

    assets:
    - assets/images/
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search