Skip to main content

​
Code Preview

The code preview components display code snippets with syntax highlighting alongside their rendered previews. Perfect for documentation and showcasing component variations.

​
ChromiaCodePreview

A component that displays code with syntax highlighting alongside its rendered preview.

​
Basic Usage

ChromiaCodePreview(
  code: '''
ChromiaButton(
  onPressed: () {},
  child: Text('Click me'),
)
  ''',
  preview: ChromiaButton(
    onPressed: () {},
    child: Text('Click me'),
  ),
)

​
Parameters

​
code
String
required
The code to display with syntax highlighting.
​
preview
Widget
required
The widget to preview (rendered version of the code).
​
title
String?
Optional title for the preview.
​
description
String?
Optional description text.
​
language
CodePreviewLanguage
default:"CodePreviewLanguage.dart"
Programming language for syntax highlighting. Options: dart, c, cpp, javascript, kotlin, java, swift, yaml, rust, lua, python.
​
showCopyButton
bool
default:"true"
Whether to show the copy button for the code.
​
codeHeight
double?
Fixed height for the code section. If not specified, auto-sizes to content.
​
previewPadding
EdgeInsetsGeometry?
Padding around the preview widget.
​
previewAlignment
Alignment
default:"Alignment.center"
Alignment of the preview widget within its container.
​
layout
CodePreviewLayout
default:"CodePreviewLayout.horizontal"
Layout orientation. Options: horizontal (side-by-side, switches to vertical on small screens), vertical (preview on top, code on bottom).

​
Examples

​
Simple Code Preview

ChromiaCodePreview(
  code: '''
ChromiaButton(
  onPressed: () => print('Hello!'),
  child: Text('Click me'),
)
  ''',
  preview: ChromiaButton(
    onPressed: () => print('Hello!'),
    child: Text('Click me'),
  ),
)

​
With Title and Description

ChromiaCodePreview(
  title: 'Primary Button',
  description: 'A button with primary styling',
  code: '''
ChromiaButton(
  variant: ButtonVariant.primary,
  onPressed: () {},
  child: Text('Primary'),
)
  ''',
  preview: ChromiaButton(
    variant: ButtonVariant.primary,
    onPressed: () {},
    child: Text('Primary'),
  ),
)

​
Vertical Layout

ChromiaCodePreview(
  layout: CodePreviewLayout.vertical,
  code: '''
ChromiaCard(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Card content'),
  ),
)
  ''',
  preview: ChromiaCard(
    child: Padding(
      padding: EdgeInsets.all(16),
      child: Text('Card content'),
    ),
  ),
)

​
JavaScript Code

ChromiaCodePreview(
  language: CodePreviewLanguage.javascript,
  code: '''
const greeting = 'Hello, World!';
console.log(greeting);
  ''',
  preview: Text('JavaScript output'),
)

​
Custom Height

ChromiaCodePreview(
  codeHeight: 300,
  code: '''/* Long code snippet... */''',
  preview: YourWidget(),
)

​
Left-Aligned Preview

ChromiaCodePreview(
  previewAlignment: Alignment.centerLeft,
  previewPadding: EdgeInsets.all(32),
  code: '''ChromiaText('Left-aligned')''',
  preview: ChromiaText('Left-aligned'),
)

​
ChromiaCodePreviewGroup

A group of related code previews with tabs for switching between them.

​
Parameters

​
items
List<CodePreviewItem>
required
List of preview items to display in tabs.
​
title
String?
Optional title for the entire group.
​
description
String?
Optional description for the group.

​
CodePreviewItem

Each item in a code preview group.
​
label
String
required
Tab label for this preview.
​
code
String
required
Code to display.
​
preview
Widget
required
Widget to preview.
​
description
String?
Optional description for this specific preview.

​
Examples

​
Button Variants

ChromiaCodePreviewGroup(
  title: 'Button Variants',
  description: 'Different button styles available',
  items: [
    CodePreviewItem(
      label: 'Primary',
      code: '''
ChromiaButton(
  variant: ButtonVariant.primary,
  onPressed: () {},
  child: Text('Primary'),
)
      ''',
      preview: ChromiaButton(
        variant: ButtonVariant.primary,
        onPressed: () {},
        child: Text('Primary'),
      ),
    ),
    CodePreviewItem(
      label: 'Secondary',
      code: '''
ChromiaButton(
  variant: ButtonVariant.secondary,
  onPressed: () {},
  child: Text('Secondary'),
)
      ''',
      preview: ChromiaButton(
        variant: ButtonVariant.secondary,
        onPressed: () {},
        child: Text('Secondary'),
      ),
    ),
    CodePreviewItem(
      label: 'Outlined',
      code: '''
ChromiaButton(
  variant: ButtonVariant.outlined,
  onPressed: () {},
  child: Text('Outlined'),
)
      ''',
      preview: ChromiaButton(
        variant: ButtonVariant.outlined,
        onPressed: () {},
        child: Text('Outlined'),
      ),
    ),
  ],
)

​
Card Examples

ChromiaCodePreviewGroup(
  title: 'Card Examples',
  items: [
    CodePreviewItem(
      label: 'Basic',
      description: 'A simple card with content',
      code: '''ChromiaCard(child: Text('Content'))''',
      preview: ChromiaCard(child: Text('Content')),
    ),
    CodePreviewItem(
      label: 'With Header',
      description: 'Card with a header section',
      code: '''
ChromiaCard(
  header: Text('Header'),
  child: Text('Content'),
)
      ''',
      preview: ChromiaCard(
        header: Text('Header'),
        child: Text('Content'),
      ),
    ),
    CodePreviewItem(
      label: 'With Footer',
      description: 'Card with header and footer',
      code: '''
ChromiaCard(
  header: Text('Header'),
  child: Text('Content'),
  footer: Text('Footer'),
)
      ''',
      preview: ChromiaCard(
        header: Text('Header'),
        child: Text('Content'),
        footer: Text('Footer'),
      ),
    ),
  ],
)

​
Enums

​
CodePreviewLayout

  • horizontal - Code on left, preview on right (switches to vertical on small screens)
  • vertical - Preview on top, code on bottom

​
CodePreviewLanguage

Supported programming languages for syntax highlighting:
  • dart - Dart language (default)
  • c - C language
  • cpp - C++ language
  • javascript - JavaScript
  • kotlin - Kotlin
  • java - Java
  • swift - Swift
  • yaml - YAML
  • rust - Rust
  • lua - Lua
  • python - Python

Build docs developers (and LLMs) love

Get started for freeTalk to us