How to center a cupertino icon in flutter?

Question

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

Answer 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.

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 .

Then did the same with MaterialIcons-Regular.ttf

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