Flutter Smooth Markdown #

A high-performance Flutter package for smooth markdown rendering with beautiful enhanced UI components.

✨ 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
• 🌐 Internationalization - Multi-language example app (6 languages supported)
• 🎬 Streaming Support - Real-time markdown rendering with StreamMarkdown widget

📺 Demo #

Basic Rendering #

Enhanced Components #

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.1.0

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.flutter-io.cn/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://rawgit.flutter-io.cn/simple-icons/simple-icons/develop/icons/flutter.svg)

🎨 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.

🔗 Links #

• GitHub Repository
• Issue Tracker

📝 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

In Progress #

• ❌ Performance optimization and benchmarking
• ❌ API documentation and code comments

Planned #

• ❌ More theme presets
• ❌ Plugin system for custom parsers
• ❌ Advanced table features (sorting, filtering)
• ❌ Accessibility improvements (screen reader support)

Made with ❤️ for the Flutter community