Flutter 颤振图标显示为矩形

我使用的是自定义的颤振图标，它是由生成的。但这里的问题是我的图标并不像它那样出现。它在预览中显示带删除符号的矩形框，如下所示。（请参阅下图）

这是我的自定义图标按钮小部件的代码片段

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),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:show_up_animation/show_up_animation.dart”；
导入“社交媒体图标.dart”；
导入“constants.dart”；
类AnimativeIcons扩展StatefulWidget{
@凌驾
_AnimativeIConState createState（）=>\u AnimativeIConState（）；
}
类_animativeIConState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回响应窗口小部件(
大屏幕：包裹(
方向：水平轴，
对齐：wrappalignment.spaceBetween，
间距：20.0，
儿童：[
动画按钮(
hovericonda:SocialMediaIcons.github，
延误：200，
url:“https://www.google.com"),
动画按钮(
hovericonda:socialmediacons.linkedin，
延误：400，
url:“https://www.google.com"),
动画按钮(
Hovericonda:socialmediacons.hackerrank，
延误：600，
url:“https://www.google.com"),
动画按钮(
hovericonda:SocialMediaIcons.twitter，
延误：800，
url:“https://www.google.com"),
动画按钮(
Hovericonda:socialmediacons.instagram，
延误：1000，
url:“http://www.google.com"),
动画按钮(
hovericonda:SocialMediaIcons.gmail，
延误：1200，
网址：“www.google.com”），
],
),
);
}
}
类AnimatedButton扩展StatefulWidget{
最终颜色动画颜色；
最终Iconda HoverIconda；
最终整数延迟；
最终字符串url；
动画按钮(
{this.animationColor，this.hovericonda，this.delay，this.url}）；
@凌驾
_AnimatedButtonState createState（）=>\u AnimatedButtonState（）；
}
类_AnimatedButtonState扩展状态
使用SingleTickerProviderStateMixin{
_启动URL（字符串goToUrl）异步{
字符串url=gotour；
如果（等待canLaunch（url））{
等待发射（url）；
}否则{
抛出“无法启动$url”；
}
}
彩色iconColor；
@凌驾
void initState（）{
super.initState（）；
iconColor=按钮颜色.hoverColor；
}
@凌驾
小部件构建（构建上下文）{
返回显示动画(
动画持续时间：持续时间（秒数：1），
延迟开始：持续时间（毫秒：widget.delay），
曲线：Curves.easeIn，
方向：方向。垂直，
偏移量：1.0，
孩子：InkWell(
onTap:（）{
_启动url（widget.url）；
打印（“按下”）；
},
onHover:（值）{
如果（值）{
设置状态（）{
iconColor=widget.animationColor；
});
}否则{
设置状态（）{
iconColor=按钮颜色.hoverColor；
});
}
},
子：图标（widget.hovericonda，大小：50，颜色：iconColor），
),
);
}
}

如果我想做一个悬停图标按钮。我试过用图标按钮，但失败了。有什么办法吗？或者

---

请任何人帮我摆脱困境。

据我所知，手机上没有悬停动作，因此我更改了图标按钮的飞溅颜色

我为自己制作了一个CustomIcon按钮类，希望这可以帮助您：

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)),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

如果对你有帮助，或者你遇到困难，请告诉我

---

用于显示网络图像的软件包：https://pub.dev/packages/cached_network_imageIf 您正在使用任何软件包获取图标，只需重新安装应用程序并检查一次即可。谢谢，它可以工作。。！非常好，我们将非常感谢您的回答，谢谢：）

    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: () {},
                ),
              ],
            ),
          ),
        );
      }
    }