Code Block

Syntax-highlighted code block with copy button and language label. Renders code from AI responses with proper formatting and one-tap clipboard copy.

Preview

Installation

Import

import 'package:my_app/flai/components/code_block/code_block.dart';

Usage

FlaiCodeBlock(
  code: '''
void main() {
  runApp(const MyApp());
}''',
  language: 'dart',
)

// Without language detection
FlaiCodeBlock(
  code: 'npm install @flai/cli',
)

// With custom action on copy
FlaiCodeBlock(
  code: myCodeString,
  language: 'python',
  onCopy: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Copied!')),
    );
  },
)

Properties

Property	Type	Default	Description
code	String	required	The code string to display.
language	String?	null	Language label (e.g., 'dart', 'python'). Shown in header.
onCopy	VoidCallback?	null	Called after code is copied. Clipboard copy is automatic.
showLineNumbers	bool	false	Whether to show line numbers in the gutter.

Features

• Language label — Displayed in the header bar when language is set
• Copy button — One-tap copy to clipboard with visual feedback
• Monospace font — Uses FlaiTypography.monoFontFamily (JetBrains Mono)
• Horizontal scroll — Long lines scroll horizontally, no wrapping
• Theme-aware — Background, text, and border colors from theme tokens