Question 78416 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Icon Button with unwanted space around

I am still green in Flutter and is facing an IconButton spacing problem:

enter image description here

There is unwanted space around the icon. I didn’t add any padding or sizedboxes between widgets, and I have the same problem with icons from awesome fonts also. Here is my code:

Widget contactCard(context, dl, i) {
  return GestureDetector(
    onTap: () {},
    child: Card(
      color: Colors.grey[300],
      child: SizedBox(
        height: 190,
        child: Padding(
          padding: EdgeInsets.all(10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(dl[i].englishName, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
              Text(dl[i].chineseName, style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
              constructPhone(dl[i].phone1),
              constructPhone(dl[i].phone2),
            ],
          ),
        ),
      ),
    ),
  );
}

Widget constructPhone(tel){
  if (tel.runes.length==0){
    return Text('');
  }else{
    return Row(
      children: [
        IconButton(
          padding: EdgeInsets.all(0),
          icon: const Icon(Icons.phone, size: 20),
          onPressed: () => launchUrl(Uri.parse("tel://" + tel)),
        ),
        Text(
          tel,
          style: TextStyle(fontSize: 18),
        ),
      ],
    );
  };
}
Tags:

2

Answers


  1. 0

    Use iconSize of IconButton

    IconButton(
 iconSize: 20,
 icon: const Icon(Icons.phone),
 padding: EdgeInsets.zero,

    The default Icon will take 24 size and there is a hard-coded padding comes with icon assets.

    Login or Signup to reply.
  2. 0

    IconButton always have quite large paddings around them, to make it easier for users to tap on them.

    If you don’t want the padding, consider using Icon widget, and wrap it with GestureDetector to do your own onTap event. You can also consider making the whole row clickable (the icon, and the text) using GestureDetector or InkWell, to allow users to click on it easier.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search