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

Made with love for the Flutter community.