Material 3 causes progressing misalignment in code and line numbers

akvelon / flutter-code-editor

Flutter Code Editor is a multi-platform code editor supporting syntax highlighting, code blocks folding, autocompletion, read-only code blocks, hiding specific code blocks, themes, and more.

https://akvelon.com

Apache License 2.0

213 stars 55 forks source link

Material 3 causes progressing misalignment in code and line numbers #262

Open alexeyinkin opened 1 year ago

alexeyinkin commented 1 year ago

Note: This issue is about misalignment that progresses with each line. For equally misaligned lines with Material 2, see #261

Steps to reproduce:

Take the 02.code_field example as of 0f18b2b1dab6cf7db3aeeb152fc02d287e662ea7
Add the following property to MaterialApp:

      theme: ThemeData(
        useMaterial3: true,
      ),

Without that, numbers are either aligned or equally misaligned, as described in https://github.com/akvelon/flutter-code-editor/issues/261
With that:

Web:

iOS:

T2XX commented 6 months ago

you can solve it by using parameter:

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