Flutter Smooth Markdown #

A high-performance Flutter markdown renderer with syntax highlighting, LaTeX math formulas, tables, footnotes, SVG images, and real-time streaming support. Beautiful, customizable UI components for modern Flutter apps.

✨ Features #

🚀 High Performance - AST-based parsing with optimized rendering
📝 Full Markdown Support - Headers, paragraphs, lists, code blocks, blockquotes, links, tables, and more
🎨 Customizable Styling - Easy theming with light/dark mode support and preset themes
✨ Enhanced UI Components - Beautiful code blocks with copy buttons, animated links, gradient blockquotes
🎯 Extensible Builder System - Custom widget builders for any markdown element
💻 Code Blocks - Syntax highlighting with language tags and copy functionality
🔗 Links - Hover animations and external link indicators
📐 Flexible Theme System - Multiple built-in themes (Default, GitHub, VS Code) with light/dark variants
📊 Table Support - Beautiful table rendering with proper styling and borders
🧮 Math Formulas - LaTeX equation rendering with flutter_math_fork
📎 Footnotes - Reference and definition support for academic writing
🖼️ SVG Images - Native SVG rendering support with flutter_svg
📋 Details & Summary - Collapsible content sections with interactive expand/collapse
🌐 Internationalization - Multi-language example app (6 languages supported)
🎬 Streaming Support - Real-time markdown rendering with StreamMarkdown widget
🔌 Plugin System - Extensible parser plugins for custom syntax (Mention, Hashtag, Emoji, AI blocks)
🤖 AI Chat Support - Built-in plugins for AI responses (Thinking, Artifact, Tool Call blocks)
📊 Mermaid Diagrams - Native rendering of flowcharts, sequence diagrams, pie charts, and Gantt charts

📺 Demo #

Main Interface #

Code Blocks with Syntax Highlighting #

Math Formula Rendering (LaTeX) #

Streaming Support #

Note: Run the example app to see all features in action: cd example && flutter run

🚀 Getting Started #

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_smooth_markdown: ^0.5.2

Then run:

flutter pub get

Basic Usage #

import 'package:flutter_smooth_markdown/flutter_smooth_markdown.dart';

// Simple markdown rendering
SmoothMarkdown(
  data: '# Hello Markdown\n\nThis is **bold** and this is *italic*.',
  styleSheet: MarkdownStyleSheet.light(),
  onTapLink: (url) {
    // Handle link tap
    print('Tapped: $url');
  },
)

Using Enhanced Components #

Get beautiful UI with enhanced components for code blocks, links, blockquotes, and headers:

import 'package:flutter_smooth_markdown/flutter_smooth_markdown.dart';

// Create custom renderer with enhanced components
final customRenderer = MarkdownRenderer(
  styleSheet: MarkdownStyleSheet.light(),
);

// Register enhanced builders
customRenderer.builderRegistry
  ..register('code_block', const EnhancedCodeBlockBuilder())
  ..register('blockquote', const EnhancedBlockquoteBuilder())
  ..register('link', const EnhancedLinkBuilder())
  ..register('header', const EnhancedHeaderBuilder());

// Render markdown
final nodes = MarkdownParser().parse(markdownText);
final widget = customRenderer.render(nodes);

Enhanced components include:

Code blocks with copy button, language tags, and hover effects
Blockquotes with quote icons, gradient backgrounds, and shadows
Links with hover animations and external link indicators
Headers with decorative accents and gradient borders

See 使用增强组件.md for detailed usage.

📚 Documentation #

For detailed documentation, see:

Core Requirements - Project requirements and specifications
Development Plan - Development roadmap and phases
UI Optimization Guide - UI enhancement strategies
Using Enhanced Components - Guide to enhanced UI components
Theme System - Theming and customization guide
Phase 2 Summary - Parser implementation details

🎯 Supported Markdown Syntax #

Text Formatting #

Bold: **text** or __text__
Italic: *text* or _text_
~~Strikethrough~~: ~~text~~
Inline code: `code`

Headers #

# H1
## H2
### H3

Lists #

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

Code Blocks #

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

Links and Images #

[Link text](https://example.com)
![Flutter Logo](https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png)

Tables #

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

Math Formulas #

Inline math: $E = mc^2$

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

Footnotes #

This text has a footnote[^1].

[^1]: This is the footnote content.

SVG Images #

![Flutter Icon](https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/flutter.svg)

Details & Summary (Collapsible Sections) #

<details>
<summary>Click to expand</summary>
This content is hidden by default and will only show when the user clicks the summary.
</details>

<details open>
<summary>Expanded by default</summary>
This section is expanded by default using the `open` attribute.
</details>

Plugin System (Custom Syntax) #

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

// Use with parser
final parser = MarkdownParser(plugins: registry);
final nodes = parser.parse('@john mentioned #flutter :rocket:');

AI Chat Plugins #

// Built-in AI response plugins
final registry = ParserPluginRegistry();
registry.register(const ThinkingPlugin());   // <thinking>...</thinking>
registry.register(const ArtifactPlugin());   // <artifact>...</artifact>
registry.register(const ToolCallPlugin());   // <tool_use>...</tool_use>

// Render AI responses with thinking process
SmoothMarkdown(
  data: aiResponse,
  plugins: registry,
)

Mermaid Diagrams (Flowcharts, Gantt Charts, etc.) #

import 'package:flutter_smooth_markdown/flutter_smooth_markdown.dart';

// Render Mermaid diagrams natively
MermaidDiagram(
  code: '''
gantt
    title Project Timeline
    dateFormat YYYY-MM-DD

    section Planning
        Requirements :done, req, 2024-01-01, 14d
        Design :done, des, after req, 10d

    section Development
        Frontend :active, front, 2024-01-25, 30d
        Backend :crit, back, 2024-01-20, 35d

    section Release
        Testing :test, 2024-02-25, 10d
        Launch :milestone, launch, 2024-03-07, 0d
  ''',
  style: MermaidStyle.dark(),
)

Supported diagram types:

Flowcharts - graph TD/LR/BT/RL with various node shapes
Sequence Diagrams - Message flows between participants
Pie Charts - Data visualization with labels and percentages
Gantt Charts - Project timelines with tasks, sections, dependencies, and milestones
Timeline Diagrams - Historical timelines with periods and events
Interactive Mode - Pan/zoom support with auto-centering and adaptive scaling

💡 Use Cases #

Perfect for building:

📱 Documentation Apps - Technical documentation with code examples
💬 Chat Applications - Rich text messaging with markdown support
📝 Note-Taking Apps - Markdown editors and viewers
🎓 Educational Platforms - Content with LaTeX formulas and code
📰 Content Management - Blog posts and articles with formatting
🤖 AI Chat Interfaces - Real-time streaming markdown responses

🎨 Theming #

The package includes multiple built-in themes with light and dark variants:

// Default themes
SmoothMarkdown(
  data: markdownText,
  styleSheet: MarkdownStyleSheet.light(), // or .dark()
)

// GitHub theme
SmoothMarkdown(
  data: markdownText,
  styleSheet: MarkdownStyleSheet.github(brightness: Brightness.light),
)

// VS Code theme
SmoothMarkdown(
  data: markdownText,
  styleSheet: MarkdownStyleSheet.vscode(brightness: Brightness.dark),
)

// Adapt to Flutter theme automatically
SmoothMarkdown(
  data: markdownText,
  styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context)),
)

// Custom theme
final customTheme = MarkdownStyleSheet.light().copyWith(
  h1Style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
  linkStyle: TextStyle(color: Colors.blue),
  codeBlockDecoration: BoxDecoration(
    color: Colors.grey[100],
    borderRadius: BorderRadius.circular(8),
  ),
);

See 主题系统.md for complete theming guide.

🤝 Contributing #

Contributions are welcome! Please read our contributing guidelines before submitting PRs.

📄 License #

This project is licensed under the MIT License.

🔍 Keywords #

flutter markdown markdown renderer markdown widget syntax highlighting code highlighting latex math math formulas markdown parser markdown viewer rich text streaming markdown real-time rendering flutter ui markdown editor documentation note taking chat app ai chat markdown to widget

🔗 Links #

📝 Roadmap #

Completed #

✅ Phase 1: Core project structure and AST node definitions
✅ Phase 2: Markdown parser implementation (87+ tests passing)
✅ Phase 3: Renderer implementation with widget builder system
✅ Enhanced UI components (code blocks, blockquotes, links, headers)
✅ Theme system with multiple presets (Default, GitHub, VS Code)
✅ Example application with theme showcase
✅ Syntax highlighting for code blocks with flutter_highlight
✅ Table support with proper styling
✅ Image rendering with caching (cached_network_image)
✅ SVG image support (flutter_svg)
✅ Math formula rendering (LaTeX with flutter_math_fork)
✅ Footnote support (references and definitions)
✅ Multi-language internationalization (Chinese, English, Japanese, Spanish, French, Korean)
✅ Phase 4: Stream support for real-time rendering with StreamMarkdown widget
✅ Streaming demo in example app
✅ Details & Summary support for collapsible content sections
✅ Plugin system for custom parsers (MentionPlugin, HashtagPlugin, EmojiPlugin, AdmonitionPlugin)
✅ AI Chat plugins (ThinkingPlugin, ArtifactPlugin, ToolCallPlugin)
✅ AI Chat Demo with Qwen3 Max integration and thinking mode
✅ Mermaid diagram support (Flowcharts, Sequence, Pie Charts, Gantt Charts)

In Progress #

❌ Performance optimization and benchmarking
❌ API documentation and code comments

Planned #

❌ More theme presets
❌ Advanced table features (sorting, filtering)
❌ Accessibility improvements (screen reader support)

Made with ❤️ for the Flutter community

flutter_smooth_markdown 0.5.2 flutter_smooth_markdown: ^0.5.2 copied to clipboard

Metadata