Gutter and text is not vertically aligned

[Stefan Matthias Aust]

I think, the gutter is off by one pixel, see:

Here's my configuration:

          CodeField(
            textStyle: const TextStyle(
              fontFamily: 'Cascadia Mono',
              // height: 1.5, // this seems to be the default
              fontSize: 16,
            ),
            gutterStyle: const GutterStyle(
              textStyle: TextStyle(
                color: Colors.white24,
                fontSize: 16,
                height: 1.5, // without this line, it doesn't match the text
              ),
            ),
            ...

I'm using version 0.2.15.

[alexeyinkin]

Not reproducible on web in Ubuntu.
@sma please post the whole main.dart with the minimal reproducible example on your system.

[Omar Kamel]

It is consistently out of sync for me

And since we're not allowed to alter the gutter text size ourselves, i cant get around this weird sizing/padding issue
which i'm assuming has something to do with the weird table you're using for the gutter

[alexeyinkin]

Reproducible on v0.3.1, web, Chrome, Mac, Flutter 3.13.9.

main.dart (modified example 02)

import 'package:flutter/material.dart';
import 'package:flutter_code_editor/flutter_code_editor.dart';
import 'package:flutter_highlight/themes/monokai-sublime.dart';
import 'package:highlight/languages/java.dart';

import '../common/snippets.dart';

void main() {
  runApp(const CodeEditor());
}

final controller = CodeController(
  text: javaFactorialSnippet,
  language: java,
);

class CodeEditor extends StatelessWidget {
  const CodeEditor({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: CodeTheme(
          data: CodeThemeData(styles: monokaiSublimeTheme),
          child: SingleChildScrollView(
            child: CodeField(
              controller: controller,
              textStyle: const TextStyle(
                fontFamily: 'Cascadia Mono',
                // height: 1.5, // this seems to be the default
                fontSize: 16,
              ),
              gutterStyle: const GutterStyle(
                textStyle: TextStyle(
                  color: Colors.white24,
                  fontSize: 16,
                  height: 1.5, // without this line, it doesn't match the text
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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 (11 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 118.0.5993.117

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

! Doctor found issues in 1 category.