Flutter 图标显示为矩形

如何解决Flutter 图标显示为矩形

我正在使用从 fluttericons.com 生成的自定义颤动图标。但这里的问题是我的图标没有出现。它在预览中显示带有删除符号的矩形框，如下所示。 （参考下图）

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

xticklabels

如果想制作一个悬停图标按钮。我尝试使用 IconButton 并且失败了..有什么办法可以做到..或 请任何人帮助我摆脱这种情况。

解决方法

据我所知移动设备上没有悬停动作，所以我更改了图标按钮的初始颜色。

我为自己制作了一个 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,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)),)
                  ],)
              ],);
  }
}

您可以根据需要进行修改。前通话：

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

告诉我它是否对您有帮助，或者您遇到了困难。

用于显示网络图像的包：https://pub.dev/packages/cached_network_image