Flutter 图标显示为矩形

Posted 2023-02-23

【中文标题】Flutter 图标显示为矩形

【英文标题】：Flutter icons appear as rectangle

【发布时间】：2021-04-17 04:16:55

【问题描述】：

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

这是我的自定义图标按钮小部件的代码 sn-p。

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

如果想制作一个悬停图标按钮。我尝试使用 IconButton 并失败了..有没有办法做到这一点..或者 请任何人帮助我摆脱困境。

【问题讨论】：

如果您使用任何软件包获取图标，只需重新安装应用并检查一次即可。

【参考方案1】：

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

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

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

    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

【讨论】：

很好，接受的答案将不胜感激，谢谢:)