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

Constructors

SmoothMarkdown({required String data, Key? key, MarkdownStyleSheet? styleSheet, MarkdownConfig? config, void onTapLink(String url)?, void onTapImage(String url, String? alt, String? title)?, Widget imageBuilder(String url, String? alt, String? title)?, Widget codeBuilder(String code, String? language)?, bool useEnhancedComponents = false, bool enableCache = true, bool useRepaintBoundary = true, bool selectable = false, ParserPluginRegistry? plugins, BuilderRegistry? builderRegistry}): Creates a widget that renders Markdown content.
const

Properties

builderRegistry → BuilderRegistry?: Custom widget builder registry for rendering plugin nodes.
final
codeBuilder → Widget Function(String code, String? language)?: Custom widget builder for rendering code blocks.
final
config → MarkdownConfig?: Configuration options for Markdown parsing behavior.
final
data → String: The Markdown text to render.
final
enableCache → bool: Whether to enable parsing cache for improved performance.
final
hashCode → int: The hash code for this object.
no setterinherited
imageBuilder → Widget Function(String url, String? alt, String? title)?: Custom widget builder for rendering images.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
onTapImage → void Function(String url, String? alt, String? title)?: Callback invoked when an image is tapped.
final
onTapLink → void Function(String url)?: Callback function invoked when a user taps on a link.
final
plugins → ParserPluginRegistry?: Parser plugins for extending markdown syntax.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
selectable → bool: Whether the rendered text content is selectable.
final
styleSheet → MarkdownStyleSheet?: The style sheet used to control the visual appearance of rendered markdown.
final
useEnhancedComponents → bool: Whether to use enhanced UI components with additional visual effects.
final
useRepaintBoundary → bool: Whether to wrap the rendered widget in a RepaintBoundary.
final

Methods

build(BuildContext context) → Widget: Describes the part of the user interface represented by this widget.
override
createElement() → StatelessElement: Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited

Static Properties

cacheStatistics → Map<String, dynamic>: Returns cache statistics for monitoring and tuning.
no setter

Static Methods

clearCache() → void: Clears the global parse cache.