Set line height to 1

[florianthiel]

The line height must be set to 1. Otherwise the icons are offset

[michaelspiss]

Hi, thanks for your contribution!
Can you give an example where this happens for a font awesome icon but not a material icon?
FaIcon is a slightly modified version of the standard flutter Icon to allow for rectangular icons. I'd like to keep those two classes as close as possible and only change something if it deviates from the expected (default flutter) behaviour.

[florianthiel]

Here is an example:

Stack(
  children: [
    Center(
      child: FaIcon(FontAwesomeIcons.userCircle, size: 80,),
    ),
    ClipRRect(
      borderRadius: BorderRadius.circular(50),
      child: Image(
        image: state.image,
        width: 80,
        height: 80,
      ),
    ),
  ],
),

This results in:

If I use a material icon like Icon(Icons.account_circle, size: 80,), then the icon has no offset:

This issue is also only present on Android devices.

[michaelspiss]

Thank you very much for the example! I will merge as soon as I've verified this does not break existing behaviour. (This may take a while as I'm very short on time right now)

[michaelspiss]

Those are the reults I get with height: 1 (where the red circle would be your image, here as a background)

I get better results with height: 1.02

As far as I can see this is only an issue for stacks. For rows with icon, text for example, nothing changes.

I guess this is due to font awesome's weired sizing...

[florianthiel]

Ok strange. I tested it again with different line heights. I'm using Flutter 2.0.1 on iOS 14.4 and tested it with this code:

Container(
  width: 100,
  height: 100,
  alignment: Alignment.center,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(50)),
    color: Colors.white
  ),
  child: FaIcon(FontAwesomeIcons.userCircle, size: 100,),
)

Using line height 1 I got this:

line height 1.02 this:

line height 0.99:

I think with line height 0.99 the icon is centered the most.

[michaelspiss]

This is very strange. For me, 0.99 is completely misaligned. Could you attach the output of flutter doctor -v?

[florianthiel]

[✓] Flutter (Channel stable, 2.0.2, on macOS 11.2.3 20D91 darwin-x64, locale de-DE)
• Flutter version 2.0.2 at /Users/ft/dev/flutter
• Framework revision 8962f6dc68 (8 days ago), 2021-03-11 13:22:20 -0800
• Engine revision 5d8bf811b3
• Dart version 2.12.1

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
• Android SDK at /Users/ft/Library/Android/sdk
• Platform android-30, build-tools 29.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.4, Build version 12D4e
• CocoaPods version 1.10.1

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 3.6)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] VS Code (version 1.54.3)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.20.0

[✓] Connected device (2 available)
• iPhone 11 Pro (mobile) • 9A8AF1C2-8969-4D49-961E-111977CEF00D • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator)
• Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.90
! Error: Florians iPhone is not connected. Xcode will continue when Florians iPhone is connected. (code -13)

• No issues found!