Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to add PNG asset as IconData?

I have png asset and I want to put it as Icon, but solutions that I found are not working.

Here is what I have now:

GradientIcon(
          ImageIcon(
            AssetImage('assets/svg/icons/discoball'),
          ),
          size.width * 0.15,
          const LinearGradient(
            stops: [
              0.25,
              0.75,
            ],
            colors: [Color(0xffff7a00), Color(0xffff00d6)],
          ),
        ),

and this is GradientIcon class

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

class GradientIcon extends StatelessWidget {
  const GradientIcon(
    this.icon,
    this.size,
    this.gradient,
  );

  final IconData icon;
  final double? size;
  final Gradient gradient;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      child: SizedBox(
        width: size! * 2,
        height: size! * 1.2,
        child: Icon(
          icon,
          size: size,
          color: Colors.white,
        ),
      ),
      shaderCallback: (Rect bounds) {
        return gradient.createShader(bounds);
      },
    );
  }
}

and I am getting this error

The argument type 'ImageIcon' can't be assigned to the parameter type 'IconData'.

Why this is not working? How to do it?

>Solution :

You can modify the GradientIcon that will accept widget.

class GradientIcon extends StatelessWidget {
  const GradientIcon(
    this.child,
    this.size,
    this.gradient,
    {super.key}
  );

  final Widget child;
  final double? size;
  final Gradient gradient;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      child: SizedBox(
        width: size! * 2,
        height: size! * 1.2,
        child: child,
      ),
      shaderCallback: (Rect bounds) {
        return gradient.createShader(bounds);
      },
    );
  }
}

Also, I would prefer named constructor

const GradientIcon({
  Key? key,
  required this.child,
  this.size,
  required this.gradient,
}) : super(key: key);
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading