SmoothMarkdown class

A widget that renders Markdown content with high performance and customizable styling.

SmoothMarkdown is a stateless widget that parses and renders Markdown text using an AST-based parser and a flexible widget builder system. It supports full CommonMark syntax plus GitHub Flavored Markdown (GFM) extensions.

Basic Usage

SmoothMarkdown(
  data: '# Hello **World**\n\nThis is a *markdown* document.',
  styleSheet: MarkdownStyleSheet.light(),
)

Features

• Full Markdown Support: Headers, lists, code blocks, tables, links, images, and more
• Customizable Styling: Use built-in themes or create custom styles
• Enhanced Components: Optional beautiful UI components with animations and effects
• Syntax Highlighting: Code blocks with language-specific syntax highlighting
• Image Support: Network images with caching, plus SVG support
• Math Formulas: LaTeX rendering with $...$ (inline) and $$...$$ (block)
• Extensible: Custom widget builders for any markdown element

Using Themes

// Built-in light theme
SmoothMarkdown(
  data: markdownText,
  styleSheet: MarkdownStyleSheet.light(),
)

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

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

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

Enhanced Components

Enable enhanced UI components for a more polished appearance:

SmoothMarkdown(
  data: markdownText,
  useEnhancedComponents: true,
  styleSheet: MarkdownStyleSheet.light(),
)

Enhanced components include:

• Code blocks: Copy button, language tags, hover effects, syntax highlighting
• Blockquotes: Quote icons, gradient backgrounds, shadows
• Links: Hover animations, external link indicators, smooth transitions
• Headers: Decorative accents, gradient borders, color markers for H1/H2

Handling Links

SmoothMarkdown(
  data: markdownText,
  onTapLink: (url) {
    // Handle link navigation
    if (url.startsWith('http')) {
      launchUrl(Uri.parse(url));
    } else {
      // Handle internal navigation
      Navigator.pushNamed(context, url);
    }
  },
)

Custom Image Builder

Provide a custom widget builder for images:

SmoothMarkdown(
  data: markdownText,
  imageBuilder: (url, alt, title) {
    return CachedNetworkImage(
      imageUrl: url,
      placeholder: (context, url) => CircularProgressIndicator(),
      errorWidget: (context, url, error) => Icon(Icons.error),
    );
  },
)

Custom Code Block Builder

Customize how code blocks are rendered:

SmoothMarkdown(
  data: markdownText,
  codeBuilder: (code, language) {
    return Container(
      padding: EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.grey[900],
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(code, style: TextStyle(fontFamily: 'monospace')),
    );
  },
)

Performance Considerations

• The widget uses an AST-based parser for efficient parsing
• Rendering is optimized to minimize widget rebuilds
• For real-time streaming content, use StreamMarkdown instead
• Large documents (10k+ lines) may benefit from lazy loading techniques

See also:

• StreamMarkdown, for real-time streaming markdown rendering
• MarkdownStyleSheet, for customizing the visual appearance
• MarkdownConfig, for configuring parsing behavior
• MarkdownRenderer, for advanced custom rendering