flutter-code-editor icon indicating copy to clipboard operation
flutter-code-editor copied to clipboard

Line numbers do not align with lines

Open albe-jj opened this issue 1 year ago • 3 comments

See an example here:

image image

albe-jj avatar Nov 01 '24 14:11 albe-jj

Adding a gutter style fixed it for me:

        CodeField(
          gutterStyle: const GutterStyle(
            textStyle: TextStyle(height: 1.5),
            showLineNumbers: true,
          ),
          controller: controller,
        )

Got this from: https://github.com/akvelon/flutter-code-editor/issues/270#issuecomment-2097035050

mjarkk avatar Nov 17 '24 12:11 mjarkk

Quick Fix: Copy the library to your local project. or Fork flutter_code_editor repository

  1. Navigate to the code of the package and modify within.(cmd + left click --> on MAC) on CodeField Widget.
  2. Navigate to GutterWidget (CMD + F --> GutterWidget)
  3. Wrap the GutterWidget in a Container and add padding top 4.

For more advance solutions you can define gutterPadding within the widget and pass it when you call CodeField Widget

simeonangelov94 avatar Dec 27 '24 03:12 simeonangelov94

Got a fix for this if anyone still needs it, assuming you use

gutterStyle: GutterStyle(
  textStyle: TextStyle(height: 1.5)
)

https://github.com/akvelon/flutter-code-editor/pull/307

ViscousPot avatar Aug 05 '25 22:08 ViscousPot