CODEWITHSUNDEEP
flutterflutter-webflutterwebviewplugin
Aashish Jha
Aashish Jha

Reputation: 269

How to fit IconButton size in Row in flutter web? Icon size renders outside the row view

I'm making a portfolio with flutter web. I created iconButtons of social handles. But when I tried to click on the iconButtons, the padding was not right.

I tried to fix it with add padding, separated row, but it didn't work out. You can see the below image for reference of what I'm trying to say. click here to see the web view debug paint image

This is the row widget in which I added these iconButtons-

   class IntroductionRow extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 90.0,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ContactIcon(iconData: FontAwesomeIcons.github, onPress: kLaunchGithubURL,),
          // SizedBox(width: 30.0,),
          ContactIcon(iconData: FontAwesomeIcons.linkedin, onPress: kLaunchLinkedInURL,),
          // SizedBox(width: 30.0,),
          ContactIcon(iconData: Icons.mail, onPress: kLaunchMailURL,),
          // SizedBox(width: 30.0,),
          ContactIcon(iconData: FontAwesomeIcons.telegram, onPress: kLaunchTelegramURL, ),
          // SizedBox(width: 30.0,),
          ContactIcon(iconData: FontAwesomeIcons.code, onPress: kLaunchLeetCodeURL,),
        ],
      ),
    );
  }
}


//This is the widget of iconButton- 
class ContactIcon extends StatelessWidget {

  final IconData iconData;
  final Function onPress;
  final bool isMobile;

  ContactIcon({@required this.iconData, this.onPress, this.isMobile = false});

  @override
  Widget build(BuildContext context) {
    return IconButton(
      padding: EdgeInsets.symmetric(horizontal: 30.0),
      hoverColor: Colors.blueAccent,
        focusColor: Colors.blueAccent,
        icon:
        Center(
          child: Icon(
              iconData,
              size: isMobile ? 30.0 : 60.0 ,
              color: Colors.white),
        ),
        onPressed: onPress);
  }
}

I recently started flutter, that's why I don't know much about all widgets- please let me know if you find any other mistake.

Upvotes: 0

Views: 1792

Answers (1)

Aashish Jha
Aashish Jha

Reputation: 269

I found the solution of my problem. I just need to add the constraints in my IconButton

constraints: BoxConstraints.expand(width: 80, height: 80),

and also instead of padding, I had to use sizedBox.

Upvotes: 1

Related Questions