iOS: Gutter shifted up from the text

[alexeyinkin]

Note: This issue is about just shifting. Line heights match and do not de-sync further down the gutter. For an issue with Material 3 with progressively shifting numbers, see #262

Run the example 02.code_field unmodified, as of 0f18b2b.

Web -- Gutter is aligned with the code lines:

iOS -- Gutter is shifted upwards for ~20% of the line height:

This is likely due to an issue in Flutter since there is nothing platform-specific in the editor, and it is built of standard widgets.

flutter doctor -v

[✓] Flutter (Channel stable, 3.13.9, on macOS 13.6 22G120 darwin-arm64, locale
    en-GE)
    • Flutter version 3.13.9 on channel stable at /Users/ai/bin/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d211f42860 (13 days ago), 2023-10-25 13:42:25 -0700
    • Engine revision 0545f8705d
    • Dart version 3.1.5
    • DevTools version 2.25.0

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/ai/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A240d
    • CocoaPods version 1.13.0

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

[✓] Android Studio (version 2022.3)
    • 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
      17.0.6+0-17.0.6b829.9-10027231)

[✓] Connected device (3 available)
    • iPhone 15 Pro Max (mobile) • 8DCD89EC-E8C0-424E-A0D7-04E293ABF945 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-17-0 (simulator)
    • macOS (desktop)            • macos                                •
      darwin-arm64   • macOS 13.6 22G120 darwin-arm64
    • Chrome (web)               • chrome                               •
      web-javascript • Google Chrome 119.0.6045.123

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[ghost]

Good afternoon @alexeyinkin,

If you set up the same font, size and line height for the code and the gutter, the problem disappears.

Cheers,
Antonio Jesus

[vd3d]

Hi,

I have try to set the same fontsize in the theme (custom one) and the gutter, but it does not solve the problem.
I still got an alignment issue.

Any idea ?

[ghost]

Hi,

I have try to set the same fontsize in the theme (custom one) and the gutter, but it does not solve the problem. I still got an alignment issue.

Any idea ?

Have you tried modifying the line height?

The two properties I had to modify were "fontSize" and "height" besides, of course, making sure the font family was the same for both.

Hope it helps,

Cheers,
Antonio Jesus

[vd3d]

Playing with 'height' helps a little bit... I have less offset, but it does not solve.
I still have some offsets..

Please, look at the picture, I have add some "red line" to show you:

[ghost]

Perhaps I’m wrong but, from your picture, I don’t think the font family and effects are the same. It looks like the text in the code are is bold whereas in the gutter is not. Are you sure they are configured the same way? For my experience with this issue and the code I’ve reviewed from the code-editor component doesn’t seem to show any synchronization between gutter and code other than font properties. I don’t have the code at hand right now but I created a text style defining the complete format and reuse it for both, the code editor and the gutter resulting in a perfect synchronization. I remember I picked a monospace font from the Google font library. If these comments don’t help, let me know and I’ll try to find the changes I did and post an example. Cheers, Antonio Jesús

…

On Thu, 4 Jan 2024 at 11:35, Clubber Lang ***@***.***> wrote: Playing with 'height' helps a little bit... I have less offset, but it does not solve. I still have some offsets.. Please, look at the picture, I have add some "red line" to show you: image.png (view on web) <https://github.com/akvelon/flutter-code-editor/assets/17200971/2e2c86d6-2563-4cfd-a230-95feddf32502> — Reply to this email directly, view it on GitHub <#261 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKX5LBUG3HCVXRIPOWK2H63YM2AWNAVCNFSM6AAAAAA7CNLU5GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZWHA3DSMJSG4> . You are receiving this because you commented.Message ID: ***@***.***>

[SilverMira]

Setting the height on both textStyle and gutterStyle did seem to fix the desync for me, unsure whether it will work on other fonts or not.

CodeField(
  controller: controller,
  textStyle: GoogleFonts.jetBrainsMono(
    fontSize: 14,
    height: 1.4,
  ),
  gutterStyle: GutterStyle(
    textStyle: GoogleFonts.jetBrainsMono(
      fontSize: 14,
      height: 1.4,
    ),
  ),
)