iOS: Gutter shifted up from the text
alexeyinkin opened this issue · comments
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.
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
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 ?
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
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:
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,
),
),
)
设置 textStyle 和 gutterStyle 的高度似乎确实解决了我的不同步问题，不确定它是否适用于其他字体。
CodeField( controller: controller, textStyle: GoogleFonts.jetBrainsMono( fontSize: 14, height: 1.4, ), gutterStyle: GutterStyle( textStyle: GoogleFonts.jetBrainsMono( fontSize: 14, height: 1.4, ), ), )
这个设置确实解决了一部分问题，但是 gutterStyle 部分总是上移，我猜可能是因为右边的 TextFiled 距离上面有一定的微小的距离导致的？所以也许我们可以在 CodeField 的左边的 gutte r的顶部加上一个占位组件，从而优化为左右两边对称显示？请注意，以上只是我的猜想，并没有证实，如果需要证实，可能需要修改源代码。
再次说明一下，这个问题我已经尝试解决了，方法如下：
1、保证已经设置相同的 height: 1.4,// 其中的值任意
2、修改源代码：定位到 CodeField 的源代码（code_field.dart），紧接着定位到其中的装订线相关的源码（gutter.dart）第69行修改如下：
return Container(
padding: EdgeInsets.only(top: 17, bottom: 12, right: style.margin), // 原来是top:12，可以适当增大！
width: style.showLineNumbers ? gutterWidth : null,
最后说明的是，修改源代码之后热更新是无效的，需要停止运行，然后再重新运行！
English ：
Setting the height of textStyle and gutterStyle does seem to solve my out-of-sync problem, not sure if it would work for other fonts.
......
This setting does solve part of the problem, but the gutterStyle section always moves up, I guess because the textfield on the right is a little bit farther from the top? So maybe a placeholder component could be placed at the top of the gutter on the left side of the CodeField to optimize for symmetric left-right display? Please note that the above is just a guess and is not validated, and if you do, you may need to modify the source code.
Again, I've tried to solve this problem as follows:
-
Make sure you have set the same height: 1.4,// any value
-
Source code: Navigate to the CodeField source code (code_field.dart), and then navigate to the source code associated with the bindings (gutter.dart). Modify the following on line 69:
return Container(
padding: E dgeInsets.only(top: 17, Bottom: 12, right: style.margin), // This is top:12, can be increased appropriately!
width: style.showLineNumbers ? gutterWidth : null,
A final note is that hot updates are invalid after modifying the source code, so you need to stop running, and then run again!