Markdown

The Markdown widget renders Markdown-formatted text into styled text. It supports a wide range of Markdown features, including headings, lists, links, code blocks, and more. This is a great way to display rich text content in your app without having to manually style each element.

Core Concepts

Instead of building complex rich text layouts manually, you provide a Markdown string, and the widget:

1. Parses the Markdown syntax

2. Applies styles based on your configuration (theme properties)

3. Renders it as a fully styled, interactive text view

You can control both:

• How it behaves → via Markdown Settings

• How it looks → via Markdown Theme

Properties

1. Markdown Settings

These properties control content, behavior, and interaction of the Markdown widget.

Property	Description
data	The Markdown-formatted string to be rendered. This is the main content of the widget.
duration	The duration of the animation when the content changes. Used when animation is enabled.
shrinkWrap	If true, the widget will shrink to fit its content instead of expanding to fill space.
selectable	If true, the rendered text can be selected and copied by the user.
animationEnabled	If true, the widget animates when the content changes (e.g., fade or transition).
onLinkTap	Action to be executed when a link in the Markdown content is tapped.
hrHeight	The height (thickness) of horizontal rules (--- or *** lines in Markdown).
hrColor	The color of horizontal rules.
h1TextStyle–h6TextStyle	Text styles for each heading level (# to ######).
codeTextStyle	The text style for inline code (e.g., `code`).
pTextStyle	The text style used for paragraph text.
linkTextStyle	The text style for links, often including color and underline.

These settings define what content is rendered, how it behaves when it changes, and how basic text elements (headings, links, paragraphs, inline code) are styled.

2. Markdown Theme

These properties control the visual theme for lists, blockquotes, and preformatted/code blocks. They start from listMarginLeft onward.

Property	Description
listMarginLeft	Left margin applied to lists (bulleted or numbered). Controls how far lists are indented.
listMarginBottom	Bottom margin below lists. Controls spacing between a list and the next element.
blockSideColor	The color of the side border for blockquotes (usually a vertical bar on the left).
blockTextColor	The text color used inside blockquotes.
blockSideWidth	The width (thickness) of the blockquote side border.
blockPadding	Inner padding for blockquotes. Controls the space between the border and the text.
blockMargin	Outer margin around blockquotes. Controls spacing between blockquotes and surrounding content.
prePadding	Inner padding for preformatted text/code blocks.
preMargin	Outer margin for preformatted text blocks.
preColor	Background color for preformatted text/code blocks.
preBorderRadius	Corner radius for preformatted text blocks, used to create rounded code blocks.
preTextStyle	Text style for preformatted text/code blocks (monospace fonts, size, color, etc.).
preLanguage	Language of the code in preformatted blocks, used for syntax highlighting (e.g., dart, js).

These properties let you create a consistent Markdown theme that matches your app’s visual identity, especially for:

• Lists

• Blockquotes

• Code blocks

Default Properties

The Markdown widget supports all Default Properties.

Use Cases

The Markdown widget is used to render rich formatted text from Markdown input (like # Heading, **bold**, - lists, etc.).

Use Markdown when you want to:

• Show content managed by non-developers

  • Blog posts, help articles, FAQs, release notes

  • Content coming from CMS or backend in Markdown format

• Display developer-friendly or docs-style text

  • API docs, technical guides, changelogs

  • README-like sections inside your app

• Render dynamic rich text safely

  • User-generated descriptions, comments, or notes written in Markdown

  • Admin-configurable content (terms, policies, feature highlights)

• Avoid building complex rich text layouts manually

  • Quickly get headings, bold, italics, code blocks, quotes, and lists

  • Ideal for long-form text with structure and styling baked in

Best Practices

• Use the onLinkTap action to handle links in your Markdown content.

• Use the text style properties to customize the appearance of your Markdown content to match your app's design.

• For large amounts of Markdown content, consider using a SingleChildScrollView to make it scrollable.