Flutter icons appear as rectangle

Question

I'm using Custom flutter icons which is generated from fluttericons.com .But here the problem is my icons are not appeared as it. It shows rectangular box with strikeout symbol in preview like this. (Refer the image below )

Here is my code snippet for my Custom icon button widget.

import 'package:flutter/material.dart';
import 'package:show_up_animation/show_up_animation.dart';
import 'social_media_icons.dart';
import 'constants.dart';

class AnimativeIcons extends StatefulWidget {
  @override
  _AnimativeIconsState createState() => _AnimativeIconsState();
}

class _AnimativeIconsState extends State<AnimativeIcons> {
  @override
  Widget build(BuildContext context) {
    return ResponsiveWidget(
      largeScreen: Wrap(
        direction: Axis.horizontal,
        alignment: WrapAlignment.spaceBetween,
        spacing: 20.0,
        children: <Widget>[
          AnimatedButton(
              hoverIconData: SocialMediaIcons.github,
              delay: 200,
              url: "https://www.google.com"),
          AnimatedButton(
              hoverIconData: SocialMediaIcons.linkedin,
              delay: 400,
              url: "https://www.google.com"),
          AnimatedButton(
              hoverIconData: SocialMediaIcons.hackerrank,
              delay: 600,
              url: "https://www.google.com"),
          AnimatedButton(
              hoverIconData: SocialMediaIcons.twitter,
              delay: 800,
              url: "https://www.google.com"),
          AnimatedButton(
              hoverIconData: SocialMediaIcons.instagram,
              delay: 1000,
              url: "http://www.google.com"),
          AnimatedButton(
              hoverIconData: SocialMediaIcons.gmail,
              delay: 1200,
              url: "www.google.com"),
        ],
      ),
      
    );
  }
}

class AnimatedButton extends StatefulWidget {
  final Color animationColor;
  final IconData hoverIconData;
  final int delay;
  final String url;

  AnimatedButton(
      {this.animationColor, this.hoverIconData, this.delay, this.url});

  @override
  _AnimatedButtonState createState() => _AnimatedButtonState();
}

class _AnimatedButtonState extends State<AnimatedButton>
    with SingleTickerProviderStateMixin {
  _launchURL(String goToUrl) async {
    String url = goToUrl;
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }

  Color iconColor;

  @override
  void initState() {
    super.initState();

    iconColor = ButtonColor.hoverColor;
  }

  @override
  Widget build(BuildContext context) {
    return ShowUpAnimation(
      animationDuration: Duration(seconds: 1),
      delayStart: Duration(milliseconds: widget.delay),
      curve: Curves.easeIn,
      direction: Direction.vertical,
      offset: 1.0,
      child: InkWell(
        onTap: () {
          _launchURL(widget.url);
          print('pressed');
        },
        onHover: (value) {
          if (value) {
            setState(() {
              iconColor = widget.animationColor;
            });
          } else {
            setState(() {
              iconColor = ButtonColor.hoverColor;
            });
          }
        },
        child: Icon(widget.hoverIconData, size: 50, color: iconColor),
      ),
    );
  }
}

If want to make a hover icon button.I tried with IconButton and failed ..Is there any way to do it..or please any one help me to get out from this.

If you are using any package to get the icons, just reinstall the App and check once. — Darsh Shah, Jan 12 '21 at 08:15

shorol · Answer 1 · 2021-01-12T10:37:38.600

As i know there is no hover action on mobile, so i change the splash color of the icon button.

I've made a CustomIcon button class for my own, hope this might help you:

class IconButton extends StatelessWidget {
  String text = 'demoText';
  Color hoverColor;
  String icon ='';
  GestureTapCallback onTap;

  IconButton(
      {Key key,
      this.text,
      this.icon,
      this.onTap,
      this.hoverColor = Colors.grey})
      : assert(text != null),
        assert(icon != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Container(
      height: height * .155,
      width: width * .44,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          border: Border.all(width: .2, color: Colors.green),
          color: Color(0xffFFFFFF),
          boxShadow: [
            BoxShadow(
                color: Colors.grey[350], blurRadius: 3, offset: Offset(2.5, 4))
          ]),
      child: Material(
        clipBehavior: Clip.antiAlias,
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
        // <------------------------- Inner Material
        type: MaterialType.transparency,
        elevation: 6.0,
        color: Colors.transparent,
        shadowColor: Colors.grey[50],
        child: InkWell(
          //<------------------------- InkWell
          splashColor: hoverColor,
          onTap: onTap,
          child: Container(
            padding: EdgeInsets.all(16.0),
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Column(
                  children: <Widget>[
                    Container(
                    height: height * .07,
                      width: width * .15,
                      child: CachedNetworkImage(
                        imageUrl: icon,
                        progressIndicatorBuilder:
                            (context, url, downloadProgress) =>
                                CircularProgressIndicator(
                                    value: downloadProgress.progress),
                        errorWidget: (context, url, error) => 
                        Icon(Icons.error),
                      ),
                    ),//please add as you 
                      need:Image.asset,SvgPicture.asset etc
                    SizedBox(
                      height: height * .009,
                    ),
                    Text(
                      text,
                      style: TextStyle(
                          fontSize: 12.0,
                          fontWeight: FontWeight.w600,
                          color: Color(0xff434343)),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

You can modify as your need. ex call:

    class MyWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  hoverColor: Colors.greenAccent,//Change hover color as you need
                  text: "Google",
                  icon:"any image url",
                  onTap: () {},
                ),
              ],
            ),
          ),
        );
      }
    }

Let me know if it's help you, or you find difficulties.

Package use to display network images : https://pub.dev/packages/cached_network_image

great, accepted answer will be highly appreciated, thanks :) — shorol, Jan 16 '21 at 14:53

Flutter icons appear as rectangle

1 Answers1