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
Markdown	Headers (with inline formatting), lists, tables, code blocks, blockquotes, links, images
Math & Charts	LaTeX formulas, Mermaid diagrams (flowcharts, Gantt, Kanban, Timeline, 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.6.0

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'),
)

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

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.