CodeView

A read-only source viewer with a line-number gutter, coarse per-line styling (comments, imports, keywords, and strings each get a tone), and a selected line.

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

CodeView(
  language: 'dart',
  source: '''
void main() {
  print('hello, terminal');
}
''',
)

Details

Up and Down move the selected line; PageUp, PageDown, Home, and End jump; clicking a line selects it. Ctrl+C copies the selected line, or the whole document when copyOptions sets CodeViewCopyMode.document. Source text is sanitized so stray escape sequences can’t corrupt the frame.

The viewer bounds its own height: it renders at most maxVisible rows (fewer for a shorter document) and scrolls the rest, so it composes directly inside a Column or any other unbounded slot. Wrap it in an Expanded or a SizedBox to give it a different height.

Constructors

CodeView()

Parameter	Type	Default	Description
source:	String	required	Raw source text parsed into document before the widget is mounted.
controller:	CodeViewController?	—	External selection and visible-range controller.
focusNode:	FocusNode?	—	Focus node used for keyboard navigation.
autofocus:	bool	false	Whether the viewer should request focus when mounted.
semanticLabel:	String	'Code'	Semantic label (the accessibility name; not rendered) for the code viewer.
language:	String?	—	Optional language hint used for coarse line classification.
filePath:	String?	—	Optional file path exposed through semantics.
maxLineLength:	int?	1000	Cuts each displayed row, line number included, to this many characters, ending it with …; null never cuts. Copying still copies the whole line.
tabSize:	int	2	Number of spaces used when expanding tabs.
showLineNumbers:	bool	true	Whether rendered rows include line-number prefixes.
maxVisible:	int	12	Maximum visible source rows before the viewer scrolls. More
copySelection:	bool	true	Whether Ctrl+C (and the semantic copy action) copies the selected line, or the document if copyOptions says so.
copyOptions:	CodeViewCopyOptions	const CodeViewCopyOptions()	Clipboard/export options for copied source text.
onCopy:	void Function(CodeViewCopyResult result)?	—	Called after a copy attempt completes.

• maxVisible: This is what bounds the viewer’s height in an unbounded slot (a Column child, say); the internal list cannot window its rows without one.

CodeView.document()

Creates a viewer from an already parsed CodeDocument. The parsing options (language, filePath, maxLineLength, tabSize, and showLineNumbers) have no effect here.

The document’s prepared rows and parsing metadata are used as supplied; source parsing is not repeated.

Parameter	Type	Default	Description
document:	CodeDocument	required	Parsed source document to render.
controller:	CodeViewController?	—	External selection and visible-range controller.
focusNode:	FocusNode?	—	Focus node used for keyboard navigation.
autofocus:	bool	false	Whether the viewer should request focus when mounted.
semanticLabel:	String	'Code'	Semantic label (the accessibility name; not rendered) for the code viewer.
language:	String?	—	Optional language hint used for coarse line classification.
filePath:	String?	—	Optional file path exposed through semantics.
maxLineLength:	int?	1000	Cuts each displayed row, line number included, to this many characters, ending it with …; null never cuts. Copying still copies the whole line.
tabSize:	int	2	Number of spaces used when expanding tabs.
showLineNumbers:	bool	true	Whether rendered rows include line-number prefixes.
maxVisible:	int	12	Maximum visible source rows before the viewer scrolls. More
copySelection:	bool	true	Whether Ctrl+C (and the semantic copy action) copies the selected line, or the document if copyOptions says so.
copyOptions:	CodeViewCopyOptions	const CodeViewCopyOptions()	Clipboard/export options for copied source text.
onCopy:	void Function(CodeViewCopyResult result)?	—	Called after a copy attempt completes.

Source

CodeView is defined in packages/fleury/lib/src/catalog/code_view.dart.

Category: Text & content · All widgets

Live demo

codeview_example.dart

Restart Run Expand

Example · editable Revert Format

Widget example() => CodeView(
  language: 'dart',
  source: r'''
import 'package:fleury/fleury.dart';

/// A tiny counter — the smallest interesting Fleury program.
void main() => runApp(
      KeyBindings(
        bindings: [
          KeyBinding(KeySequence.q, onTrigger: (_) => exitApp(), label: 'Quit'),
        ],
        child: const CounterApp(),
      ),
    );

class CounterApp extends StatefulWidget {
  const CounterApp({super.key});

  @override
  State<CounterApp> createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _count = 0;

  void _increment() => setState(() => _count++);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text('count: $_count'),
          const SizedBox(height: 1),
          Button(text: '+1', onPressed: _increment),
        ],
      ),
    );
  }
}
''',
);

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand