flutter_smooth_markdown 0.7.4

High-performance Flutter markdown renderer with syntax highlighting, LaTeX math, tables, footnotes, SVG images, and real-time streaming support.

Flutter Smooth Markdown

A high-performance Flutter markdown renderer with syntax highlighting, LaTeX math, tables, footnotes, SVG images, Mermaid diagrams, and real-time streaming support.

Features

Category	Features
Rendering	AST-based parsing, syntax highlighting, real-time streaming, text selection
Markdown	Headers (with inline formatting), lists, tables, code blocks, blockquotes, links, images
Math & Charts	LaTeX formulas, Mermaid diagrams (flowcharts, Gantt, Kanban, Timeline, Radar, XY Chart, pie, sequence)
Extras	Footnotes, SVG support, collapsible sections, task lists
Theming	Light/dark modes, GitHub/VS Code presets, custom themes
Plugins	Mentions, hashtags, emojis, AI chat blocks (thinking, artifacts)

Demo

Main Interface	Code Blocks	LaTeX Math

Run the example app: cd example && flutter run

Quick Start

Installation

dependencies:
  flutter_smooth_markdown: ^0.7.4

flutter pub get

Basic Usage

import 'package:flutter_smooth_markdown/flutter_smooth_markdown.dart';

SmoothMarkdown(
  data: '# Hello Markdown\n\nThis is **bold** and *italic*.',
  styleSheet: MarkdownStyleSheet.light(),
  onTapLink: (url) => print('Tapped: $url'),
)

Selectable Text

SmoothMarkdown(
  data: markdownText,
  selectable: true,
  onTapImage: (url, alt, title) {
    showImagePreview(context, url);
  },
)

Selection handles work across text and non-text blocks (images, tables, etc.). Copied content is automatically cleaned.

Programmatic Selection

When selectable: true, the content is wrapped in a SmoothSelectionRegion (a thin SelectableRegion adapter). Pass a selectionController to drive selection programmatically:

final controller = SmoothSelectionController();

SmoothMarkdown(
  data: markdownText,
  selectable: true,
  selectionController: controller,
)

// Later — enter selection mode with handles + toolbar:
controller.selectAll(SelectionChangedCause.toolbar);

// Or select text around a press position:
controller.selectParagraphAt(details.globalPosition);

The selection rule lives in your application code. For example, a chat bubble menu can choose paragraph selection while an editor toolbar chooses select-all:

void handleSelectText(Offset pressPosition) {
  switch (selectionMode) {
    case SelectionMode.word:
      controller.selectWordAt(pressPosition);
      return;
    case SelectionMode.paragraph:
      controller.selectParagraphAt(pressPosition);
      return;
    case SelectionMode.message:
      controller.selectAll(SelectionChangedCause.toolbar);
      return;
  }
}

For lower-level control, SmoothSelectionController exposes the underlying SelectionContainer + SelectionEvent machinery:

// Clear the current selection (hides handles + toolbar):
controller.clearSelection();

// Dispatch an arbitrary SelectionEvent straight to the SelectionContainer
// (fans out to every text selectable). Does not drive the overlay by itself.
controller.dispatchEvent(const SelectAllSelectionEvent());

// Reach the SelectionRegistrar collecting the text selectables.
final registrar = controller.registrar;

contextMenuBuilder (if provided) now receives a SmoothSelectionRegionState, giving the menu access to dispatchEvent, registrar, contextMenuButtonItems, and contextMenuAnchors.

selectableRegionKey is still available for advanced integrations that need direct access to SmoothSelectionRegionState.

Migration (minor breaking): selectableRegionKey is now typed GlobalKey<SmoothSelectionRegionState> (was GlobalKey<SelectableRegionState>), and contextMenuBuilder's second parameter is now SmoothSelectionRegionState. Rename the type and the new methods become available; existing calls (selectAll, contextMenuButtonItems, contextMenuAnchors) work unchanged. New code should prefer selectionController.

Streaming (Real-time)

StreamMarkdown(
  stream: yourMarkdownStream,
  styleSheet: MarkdownStyleSheet.dark(),
)

Enhanced Components

final renderer = MarkdownRenderer(styleSheet: MarkdownStyleSheet.light());

renderer.builderRegistry
  ..register('code_block', const EnhancedCodeBlockBuilder())
  ..register('blockquote', const EnhancedBlockquoteBuilder())
  ..register('link', const EnhancedLinkBuilder())
  ..register('header', const EnhancedHeaderBuilder());

final nodes = MarkdownParser().parse(markdownText);
final widget = renderer.render(nodes);

Theming

// Built-in themes
MarkdownStyleSheet.light()
MarkdownStyleSheet.dark()
MarkdownStyleSheet.github(brightness: Brightness.light)
MarkdownStyleSheet.vscode(brightness: Brightness.dark)

// From Flutter theme
MarkdownStyleSheet.fromTheme(Theme.of(context))

// Custom
MarkdownStyleSheet.light().copyWith(
  h1Style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
  linkStyle: TextStyle(color: Colors.blue),
)

Plugins

// Custom syntax plugins
final registry = ParserPluginRegistry();
registry.register(const MentionPlugin());    // @username
registry.register(const HashtagPlugin());    // #topic
registry.register(const EmojiPlugin());      // :smile:

final parser = MarkdownParser(plugins: registry);

AI Chat Plugins

registry.register(const ThinkingPlugin());   // <thinking>...</thinking>
registry.register(const ArtifactPlugin());   // <artifact>...</artifact>
registry.register(const ToolCallPlugin());   // <tool_use>...</tool_use>

Mermaid Diagrams

MermaidDiagram(
  code: '''
  graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
  ''',
  style: MermaidStyle.dark(),
)

Supports: Flowcharts, Sequence Diagrams, Pie Charts, Gantt Charts, Kanban Boards, Timeline Diagrams, Radar Charts, XY Charts

XY Chart Example

MermaidDiagram(
  code: '''
  xychart-beta
    title "Sales Revenue"
    x-axis [Q1, Q2, Q3, Q4]
    y-axis "Revenue" 0 --> 100
    bar [23, 45, 67, 89]
    line [20, 50, 60, 85]
  ''',
)

Radar Chart Example

MermaidDiagram(
  code: '''
  radar-beta
    title Skills Assessment
    axis Programming, Design, Communication, Management, Innovation
    curve Alice{5, 3, 4, 2, 4}
    curve Bob{3, 5, 3, 4, 3}
    showLegend true
    max 5
    graticule polygon
  ''',
)

Markdown Syntax

Text Formatting

**Bold** or __Bold__
*Italic* or _Italic_
~~Strikethrough~~
`Inline code`

Lists & Tasks

- Unordered item
1. Ordered item
- [ ] Task
- [x] Completed task

Code Blocks

```dart
void main() {
  print('Hello, World!');
}
```

Tables

| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |

Math (LaTeX)

Inline: $E = mc^2$

Block:
$$
\int_{a}^{b} f(x) dx = F(b) - F(a)
$$

Footnotes

Text with footnote[^1].

[^1]: Footnote content.

Collapsible Sections

<details>
<summary>Click to expand</summary>
Hidden content here.
</details>

Use Cases

• Documentation apps with code examples
• Chat applications with rich text
• Note-taking apps
• Educational platforms with LaTeX
• AI chat interfaces with streaming

Documentation

Document	Description
Plugin System	Custom parser plugins
Theme System	Theming guide
Enhanced Components	Rich UI components
Architecture	System architecture

Roadmap

Completed: Core parser, renderer, themes, streaming, math, tables, footnotes, SVG, plugins, Mermaid diagrams, AI chat plugins, i18n (6 languages)

In Progress: Performance optimization, API documentation

Planned: More themes, advanced tables, accessibility

Contributing

Contributions welcome! Please read our guidelines before submitting PRs.

License

MIT License

Links

• GitHub
• Issues
• pub.dev

---

Made with love for the Flutter community.