Flutter icons appear as rectangle - flutter

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.

Answer 1

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