Default components / Code & math
Fenced code block
Renders fenced code with optional language labeling, highlighting, and a copy affordance.
What it renders
Live Flutter preview
Starting the Flutter widget
Rendering this component with gpt_markdown…
This is the real GptMarkdown Flutter widget, rendered with the exact Markdown input shown here.
Markdown input
1```dart
2final answer = await model.generate();
3```Default behavior
Runtime behavior
The first fence token supplies the language. While streaming, the builder receives closed: false until the closing fence arrives.
Accessibility note
The default code is selectable and the copy affordance should have localized labels if you replace it.
Theming & styling
Theme layering guideCodeBlockStyle is the component's appearance surface. Set only the values you need; style-sheet values merge field-by-field with the active theme and package defaults.
| Style class | Available fields |
|---|---|
| CodeBlockStyle | backgroundColor · borderColor · borderWidth · borderRadius · padding · headerPadding · fontFamily · fontFamilyPackage · fontSize · textColor · showLanguageLabel · languageStyle · showCopyButton · copyLabel · copiedLabel |
1GptMarkdown(
2 markdown,
3 styleSheet: const GptMarkdownStyleSheet(
4 codeBlock: CodeBlockStyle(
5 borderRadius: Radius.circular(12),
6 showLanguageLabel: true,
7 showCopyButton: true,
8 ),
9 ),
10 onCodeCopy: (code) => analytics.log('code_copied'),
11)App-wide or scoped theme
1GptMarkdownThemeData(
2 brightness: Brightness.light,
3 styleSheet: const GptMarkdownStyleSheet(
4 codeBlock: CodeBlockStyle(
5 // Set only the values your app needs.
6 ),
7 ),
8)Builders & callbacks
codeBuilder
Widget Function(BuildContext context, String name, String code, bool closed)
Use this only when the default widget structure is no longer the right shape. The resolved style or configuration is passed where applicable.
onCodeCopy
void Function(String code)
Runs after the built-in copy action.
Safely override the default
A custom component list replaces a default list entirely. Put your matching component first, then append the package defaults so every other Markdown feature continues to render.
1// Passing components replaces its defaults. Prepend to override matching syntax,
2// then keep every built-in component after it.
3GptMarkdown(
4 markdown,
5 components: [
6 MyCodeBlockMdOverride(),
7 ...MarkdownComponent.globalComponents,
8 ],
9)