DEV Community

idawnwon
idawnwon

Posted on

Flutter | Rectangular icons are centred incorrectly

I created an app logo in Sketch. Since in my design, it will be always in mono colour. So, embed it in to an icon font along with other app icons is not a bad idea.

Alt Text

I followed Emvolution Germany's post in medium.com, worked fine, but a bit weird:

Alt Text

The snippet:

        ...
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(AwesomeIcons.logo),
              ...
Enter fullscreen mode Exit fullscreen mode

Googled, found the same issue commented by bartektartanus on Github. It seems that rectangular icons do have centring problem.

I got a workaround:

        ...       
              Text(
                "\ue800", // the code point of the logo
                style: TextStyle(fontFamily: 'Howaii2'),
              ),

              ...
Enter fullscreen mode Exit fullscreen mode

e800 is the code point, add \u before it.
Result:
Alt Text

Another workaround according to jason-simmons's comment on Github:

final IconData icon = AwesomeIcons.logo;
...
Text(String.fromCharCode(icon.codePoint),
  style: TextStyle(
    fontSize: 24.0,
    fontFamily: icon.fontFamily,
    package: icon.fontPackage)
),
Enter fullscreen mode Exit fullscreen mode

Alt Text

BTW, don't mess up the indentation of pubspec.yaml.
There should be 2 indentations before fonts:

Alt Text

Hope this helps!

So proud to be a coder!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs