Gutter Numbers and Code Text Not Aligned
@rohansingh @UbayGD @AKosolapov @mrshakirov @ArinFaraj
Hello, since the package is now updated, I would kindly ask is it possible to add Gutter padding.
Currently, the gutter numbers and the code editor are not aligned. Please find example code below. If gutterPadding is added which I did before in a forked library - it aligns perfectly but otherwise is 4 units misaligned. Please find a photo and code example below.
Example Code @override Widget build(BuildContext context) { //controller.visibleSectionNames = {'section1'}; return CodeTheme( data: CodeThemeData(styles: customMonokaiSublimeTheme), child: CodeField( controller: codeEditorController, onChanged: (value) { if (widget.onChanged != null) widget.onChanged!(value); }, padding: EdgeInsets.all(0), // gutterPadding: 4, minLines: widget.isBigScreen == false ? 5 : 15, // maxLines: widget.isBigScreen == false ? 15 : 25, textStyle: TextStyle(fontFamily: 'SourceCode', height: 1.5, fontSize: 18), gutterStyle: GutterStyle( margin: 10, textAlign: TextAlign.end, textStyle: const TextStyle( color: Colors.blue, fontWeight: FontWeight.bold, height: 1.5, fontFamily: 'SourceCode', fontSize: 18 //fontSize: 18.0, ), ), ), ); }
Try this - Expanded( child: CodeTheme( data: CodeThemeData(styles: ThemeService.getTheme(_selectedTheme)), child: CodeField( gutterStyle: GutterStyle( showLineNumbers: true, showErrors: true, background: Colors.transparent, // FIX 1: Increased width to accommodate more digits (e.g., up to 999). width: 80, textStyle: GoogleFonts.firaCode( fontSize: 12, color: const Color(0xFF00FF88), fontWeight: FontWeight.w500, // FIX 2: Added matching height property for vertical alignment. height: 1.6, ), // RECOMMENDATION: Uncomment and use right alignment for a cleaner look. textAlign: TextAlign.center, // Add some padding so the numbers aren't stuck to the edge. margin: 8.0, ), controller: _codeController, wrap: true, expands: true, textStyle: GoogleFonts.firaCode( fontSize: 16, color: Colors.white, height: 1.6, fontWeight: FontWeight.w500, ), ), ), ),