gpt_markdown documentation

The complete guide to gpt_markdown. Start with one widget, then learn every supported rendering behavior, customization layer, inline extension point, test strategy, and migration consideration.

Quick start

terminal

flutter pub add gpt_markdown

main.dart

import 'package:gpt_markdown/gpt_markdown.dart';

GptMarkdown(
  r'**Hello!** Inline math: \( E = mc^2 \)',
)

This renders common Markdown and LaTeX immediately. Use a latexBuilder only when your app needs to replace the default math widget.

Long documents with SliverGptMarkdown

Use SliverGptMarkdown inside CustomScrollView.slivers when a long AI response, generated report, article, or documentation page has its own scrollable viewport.

long_response.dart

SelectionArea(
  child: CustomScrollView(
    slivers: [
      const SliverAppBar(
        title: Text('AI response'),
      ),
      SliverGptMarkdown(
        longResponse,
        config: const GptMarkdownConfig(
          style: TextStyle(fontSize: 16),
        ),
      ),
    ],
  ),
)

Viewport-lazy rendering

The source is segmented first, but Markdown spans and widgets are created only when the viewport approaches each segment. Offscreen work waits until it is needed.

Better long-document performance

Delaying offscreen parsing and widget construction reduces initial rendering and layout work compared with placing a full GptMarkdown document inside a SingleChildScrollView.

Keep GptMarkdown for compact content and character-by-character streaming reveal. SliverGptMarkdown displays source updates immediately and prioritizes viewport laziness for long content.

Three ways to customize

Style sheets and themes change appearance without replacing the renderer.
Builders and callbacks replace supported structures or connect interactions to your app.
Patterns and components turn app-specific tokens such as @mentions into native inline UI.

Complete package coverage

These pages cover the package's full documentation set in the website itself: getting started, customization, streaming, inline syntax, custom components, testing, and migration—alongside focused rendering and API references.

How to choose a customization tool

Need	Use	Why
Change colour, size, padding, or font	Style object	Keeps the package structure and future component improvements.
Replace a component's widget structure	Builder	Use only when the default structure is genuinely not enough.

A WidgetSpan inside a link label does not paint on iOS; declare safe scopes for custom components.
Changing a builder at runtime needs a remount because closures are not compared for span caching.
Markdown text lives in spans, so find.text is not the normal widget-test assertion.