Initial working horizontal scrollbar

Author: TechnicJelle

example/lib/05.two_dimensional_scrollbars/main.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_code_editor/flutter_code_editor.dart';
+import 'package:flutter_highlight/themes/ir-black.dart' show irBlackTheme;
+import 'package:highlight/languages/dart.dart';
+
+void main() {
+  runApp(const CodeEditor());
+}
+
+const monospace = TextStyle(fontFamily: 'monospace', fontSize: 14, height: 1.2);
+
+class CodeEditor extends StatefulWidget {
+  const CodeEditor({super.key});
+
+  @override
+  State<CodeEditor> createState() => _CodeEditorState();
+}
+
+class _CodeEditorState extends State<CodeEditor> {
+  final codeController = CodeController(language: dart);
+  final vScrollController = ScrollController();
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      theme: ThemeData(
+        scaffoldBackgroundColor: Colors.black,
+        scrollbarTheme: Theme.of(context).scrollbarTheme.copyWith(
+              radius: const Radius.circular(2),
+              thumbVisibility: const WidgetStatePropertyAll(true),
+              trackVisibility: const WidgetStatePropertyAll(true),
+              thumbColor: WidgetStateProperty.all(Colors.grey),
+            ),
+      ),
+      home: Scaffold(
+        body: SingleChildScrollView(
+          controller: vScrollController,
+          child: CodeTheme(
+            data: CodeThemeData(styles: irBlackTheme),
+            child: CodeField(
+              gutterStyle: const GutterStyle(
+                showFoldingHandles: false,
+                textStyle: monospace,
+              ),
+              textStyle: monospace,
+              controller: codeController,
+              enableHorizontalScrollBar: true,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/src/code_field/code_field.dart

@@ -126,6 +126,9 @@ class CodeField extends StatefulWidget {
   /// or make the field scrollable horizontally.
   final bool wrap;
 
+  /// Whether to show horizontal scrollbar.
+  final bool enableHorizontalScrollBar;
+
   /// A CodeController instance to apply
   /// language highlight, themeing and modifiers.
   final CodeController controller;
@@ -172,6 +175,7 @@ class CodeField extends StatefulWidget {
     this.maxLines,
     this.expands = false,
     this.wrap = false,
+    this.enableHorizontalScrollBar = false,
     this.background,
     this.decoration,
     this.textStyle,
@@ -188,6 +192,10 @@ class CodeField extends StatefulWidget {
     @Deprecated('Use gutterStyle instead')
     this.lineNumberStyle = const GutterStyle(),
   })  : assert(
+          !(enableHorizontalScrollBar && wrap),
+          'Can not wrap and show horizontal scrollbar at the same time',
+        ),
+        assert(
             gutterStyle == null || lineNumbers == null,
             'Can not provide gutterStyle and lineNumbers at the same time. '
             'Please use gutterStyle and provide necessary columns to show/hide'),
@@ -366,14 +374,23 @@ class _CodeFieldState extends State<CodeField> {
       ),
     );
 
-    return SingleChildScrollView(
+    final scrollView = SingleChildScrollView(
       padding: EdgeInsets.only(
         right: widget.padding.right,
       ),
       scrollDirection: Axis.horizontal,
       controller: _horizontalCodeScroll,
       child: intrinsic,
     );
+
+    if (widget.enableHorizontalScrollBar) {
+      return Scrollbar(
+        controller: _horizontalCodeScroll,
+        child: scrollView,
+      );
+    } else {
+      return scrollView;
+    }
   }
 
   @override