5

First of all, I have tried using Center(), With that out the way, it seems cupertino icons are off center

             IconButton(
              icon: const Icon(
                CupertinoIcons.add_circled,
                color: Colors.black,
              ),
              padding: const EdgeInsets.all(0),
              onPressed: () {}
              ),

wrapping the icon directly in a Center() widget doesnt change anything either I this is how it looks slightly off center

martinseal1987
  • 1,862
  • 8
  • 44
  • 77

1 Answers1

1

CupertinoIcons are actually centered in Flutter.

If you take a look at the source icons map for Cupertino here you'll see that the icons are aligned to the bottom inside the square that Flutter loads (and even slightly aligned to the left). Therefore, you can't adjust it's alignment in your code as the resource is already centered.

enter image description here

UPDATE

I went a step further and found the CupertinoIcons.ttf font on the flutter sdk source. Then opened it with https://www.glyphrstudio.com.

enter image description here

Then did the same with MaterialIcons-Regular.ttf

enter image description here

You can clearly see how the icon is aligned against the baseline on Cupertino (as characters do on any font), and perfectly centered on Material (as icons should be).

There's more information about font metrics on this Medium article

You can find CupertinoIcons.ttf here: https://github.com/flutter/cupertino_icons/tree/master/assets

GaboBrandX
  • 2,380
  • 14
  • 25
  • i think i know what your trying to say but they're not 'centered' and i guess what your actually saying is that they shouldn't be, as this is what they are in iOS – martinseal1987 Jun 20 '19 at 06:54
  • Well, I don't know if this is actually by iOS design or not. But the link I posted is the source Flutter use. If we talk about centering the icon, it is centered. But because it is not trimmed it looks like it isn't – GaboBrandX Jun 20 '19 at 13:01
  • sorry but i don't agree – martinseal1987 Jun 21 '19 at 07:11
  • @martinseal1987 I've updated my answer with more prove of what I'm saying. Please take a look. – GaboBrandX Jun 21 '19 at 20:28
  • cool, so i was right to say they are off center, as you also concluded they are aligned on the baseline like an icon font, so it will never be centered – martinseal1987 Jun 22 '19 at 06:25
  • That's right. The icons are not centered at typography level, but they are at Flutter level. – GaboBrandX Jun 22 '19 at 15:46
  • Hi, I faced the same problem of my icon not centralised as well. Did you manage to solve it? – snigcode Dec 19 '20 at 14:47
  • My sugesstion is to use an icons font that place them centered. If you put your text and icon in a row, and padding around the icon you might get a workaround, but see if it renders correctly in any screen density on both android and ios. – GaboBrandX Dec 20 '20 at 12:53