flutter - Flutter 图标显示为矩形

Question

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

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

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 并失败了..有没有办法做到这一点..或者请任何人帮助我摆脱困境。

Answer 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