Custom Components

Register your own Flutter widgets as Markdown elements. Block components replace whole lines; inline components can appear inside a sentence alongside text. Both use regular expressions to match custom syntax in the Markdown string.

components

Block-level

Match multi-line patterns, replace with any widget

inlineComponents

Inline

Match within a line, rendered alongside text

sourceTagBuilder

Citations

Render AI citation/source references

Block component

A block component that turns <callout type="warning">...</callout> into a styled callout box — useful when your AI model is prompted to output structured annotations.

callout_component.dart

import 'package:flutter/material.dart';
import 'package:gpt_markdown/gpt_markdown.dart';

// A custom block component that renders a styled callout box.
// Triggered when the AI outputs: <callout type="warning">text</callout>

final calloutComponent = MarkdownComponent(
  exp: RegExp(r'<callout type="(\w+)">(.*?)</callout>', dotAll: true),
  builder: (context, match, style) {
    final type = match.group(1) ?? 'info';
    final text = match.group(2) ?? '';
    final colors = {
      'warning': (Colors.orange.shade50, Colors.orange.shade400),
      'error':   (Colors.red.shade50,    Colors.red.shade400),
      'info':    (Colors.blue.shade50,   Colors.blue.shade400),
    };
    final (bg, border) = colors[type] ?? colors['info']!;
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 8),
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: bg,
        border: Border(left: BorderSide(color: border, width: 4)),
        borderRadius: BorderRadius.circular(4),
      ),
      child: Text(text, style: style),
    );
  },
);

// Register it:
GptMarkdown(
  content,
  components: [calloutComponent],
)

Inline component

An inline component that renders <badge color="green">NEW</badge> as a colored pill badge, rendered within a sentence.

badge_component.dart

import 'package:flutter/material.dart';
import 'package:gpt_markdown/gpt_markdown.dart';

// A custom inline component that renders colored badges.
// Triggered by: <badge color="green">NEW</badge>

final badgeComponent = InlineMarkdownComponent(
  exp: RegExp(r'<badge color="(\w+)">(.*?)</badge>'),
  builder: (context, match, style) {
    final color = match.group(1) ?? 'blue';
    final label = match.group(2) ?? '';
    final colorMap = {
      'green':  Colors.green,
      'blue':   Colors.blue,
      'red':    Colors.red,
      'orange': Colors.orange,
    };
    final c = colorMap[color] ?? Colors.blue;
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
      decoration: BoxDecoration(
        color: c.withOpacity(0.15),
        borderRadius: BorderRadius.circular(4),
        border: Border.all(color: c.withOpacity(0.4)),
      ),
      child: Text(
        label,
        style: style?.copyWith(
          color: c.shade700,
          fontSize: 11,
          fontWeight: FontWeight.w600,
          letterSpacing: 0.3,
        ),
      ),
    );
  },
);

// Register it:
GptMarkdown(
  content,
  inlineComponents: [badgeComponent],
)

Registering multiple

Pass any number of components in the list — they are tested in order.

registration.dart

GptMarkdown(
  content,
  components: [
    calloutComponent,
    sectionDividerComponent,
    codePlaygroundComponent,
  ],
  inlineComponents: [
    badgeComponent,
    tooltipComponent,
  ],
)

Citation / source tags

The package has first-class support for AI citation tags via sourceTagBuilder.

source_tags.dart

// The package has built-in support for AI citation tags like:
// <source>1</source> or [1] style references.
// Use sourceTagBuilder to render them your way:

GptMarkdown(
  content,
  sourceTagBuilder: (context, sources) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: sources.map((src) => GestureDetector(
        onTap: () => openSource(src),
        child: Container(
          margin: const EdgeInsets.only(left: 2),
          padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
          decoration: BoxDecoration(
            color: Colors.blue.shade50,
            borderRadius: BorderRadius.circular(4),
          ),
          child: Text(
            src,
            style: const TextStyle(fontSize: 10, color: Colors.blue),
          ),
        ),
      )).toList(),
    );
  },
)

Tip — prompt your AI to use custom tags

Custom components work best when you include tag instructions in your system prompt. For example: "When highlighting a warning, wrap it in <callout type="warning">...</callout>."

← Style & Parameters