CODEWITHSUNDEEP
flutter
kamal
kamal

Reputation: 1034

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

Upvotes: 1

Views: 743

Answers (2)

Vishal Zaveri
Vishal Zaveri

Reputation: 1557

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/

Upvotes: 1

eamirho3ein
eamirho3ein

Reputation: 17880

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

Upvotes: 2

Related Questions