Icon not centered in FaIcon when used as prefix icon

[SeriousMonk]

I have a TextFormField and am using the FaIcon widget as prefix icon:

TextFormField(
     decoration: InputDecoration(
         border: InputBorder.none,
         contentPadding: EdgeInsets.only(top: 14.0),
         prefixIcon: FaIcon(
             FontAwesomeIcons.penNib,
             color: themeOrangeColor,
         ),
    ),
)

This results in the FontAwesomeIcon to be aligned top-left inside the FaIcon widget like so:

Any Idea to why this happens?

[michaelspiss]

Out of curiosity: does this happen with material icons as well?
You may need to wrap the icon in an Align widget

[SeriousMonk]

Using Icon instead of FaIcon fixed it. Thanks!

[michaelspiss]

Reopening, this seems to be a bug with FaIcon

[callawey]

You can use it like below, this will align it correctly.

prefixIcon: const Padding(
   padding: EdgeInsets.all(10.0),
   child: FaIcon(FontAwesomeIcons.penNib, color: themeOrangeColor),
),

[michaelspiss]

I just published version 10.0.0-beta on pub, which should resolve this issue. However, since this is a change to FaIcon, I'd like to make sure everything works as expected - even in cases I did not think of in my tests. It'd be great if some of you could check if everything works in your apps and maybe leave some feedback. Thanks!

[stedekay]

So, I just tried your beta version and it still seems a bit off.
This is my rough setup for my input fields in my main.yml:

  ThemeData _getTheme() {
    final ThemeData theme = ThemeData();

    return theme.copyWith(
      [...],
      inputDecorationTheme: InputDecorationTheme(
        labelStyle: TextStyle(
          color: Color(0xff555555),
        ),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Get.theme.dividerColor),
        ),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Get.theme.dividerColor),
        ),
        border: UnderlineInputBorder(
          borderSide: BorderSide(
            color: Color(0xff888888),
          ),
        ),
      ),
    );
  }

This is an example in one of my widgets:

TextFormField(
  controller: controller.passwordController,
  decoration: InputDecoration(
    // prefixIcon: Icon(Icons.lock, color: Get.theme.dividerColor),
    prefixIcon: FaIcon(FontAwesomeIcons.lock,
        color: Get.theme.dividerColor),
    labelText: "Passwort",
  ),
  autocorrect: false,
  enableSuggestions: false,
  obscureText: true,
  autofocus: true,
),

When using the commented line (so using a "normal" icon instead of FaIcons) I'll get the following result:

But with FaIcons I get the following:

So the FaIcon seems to be too high. Not sure if I gave enough information to reproduce. Hit me up if you need more info.

[michaelspiss]

First of all, thanks for your help @stedekay!
It looks like in this case the widget still acts like before... I guess it needs a bit more tinkering

[michaelspiss]

@stedekay this is what your code looks like for me:

FaIcon on top, Material Icon on the bottom

[stedekay]

Mmh, interesting.
Maybe I made a mistake while upgrading my setup (I am using Font Awesome Pro and had problems with upgrading).
So I'll have to give it another go.

Thanks for looking at it again!

[EpiSayLaCata]

I just published version 10.0.0-beta on pub, which should resolve this issue. However, since this is a change to FaIcon, I'd like to make sure everything works as expected - even in cases I did not think of in my tests. It'd be great if some of you could check if everything works in your apps and maybe leave some feedback. Thanks!

Hi there,

I just installed FontAwesomeIcon (4.7), solution with padding is working. However if we don't apply any padding, this is not working and the bug seems to be there

[michaelspiss]

Hi @EpiSayLaCata, thanks for testing. Can you give a short code example for an issue with the padding which worked in version 9.2.0 or with material's Icon? Preferably with a screenshot.

[michaelspiss]

The fix seems to work, but I've noticed quite a performance penalty - especially when many icons are used. I've opened up an issue over at flutter/flutter#99830 intending to make FaIcon obsolete.
This also means that the fix will not ship with version 10 of this package.

[GregoryConrad]

Issue is still in v10.1.0, as expected. Switching to Icon instead of FaIcon as others suggested fixed the issue. It would be nice if the actual Icon class supported non 1:1 aspect ratios...

[michaelspiss]

I had a fix ready, but it was too resource intensive to be a viable option.

The proposal regarding rectangular icon support is linked above your comment, please upvote it, so it gets a higher priority from the flutter team.

I'd love to get rid of FaIcon as well.