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.

Properties

Property	Description
data	The Markdown-formatted string to be rendered.
duration	The duration of the animation when the content changes.
shrinkWrap	If true, the widget will shrink to fit its content.
selectable	If true, the rendered text can be selected by the user.
animationEnabled	If true, the widget will animate when the content changes.
onLinkTap	An action to be executed when a link is tapped.
hrHeight	The height of horizontal rules.
hrColor	The color of horizontal rules.
h1TextStyle - h6TextStyle	The text style for each heading level.
codeTextStyle	The text style for inline code.
pTextStyle	The text style for paragraphs.
linkTextStyle	The text style for links.
listMarginLeft	The left margin for lists.
listMarginBottom	The bottom margin for lists.
blockSideColor	The color of the side border for blockquotes.
blockTextColor	The color of the text for blockquotes.
blockSideWidth	The width of the side border for blockquotes.
blockPadding	The padding for blockquotes.
blockMargin	The margin for blockquotes.
prePadding	The padding for preformatted text blocks.
preMargin	The margin for preformatted text blocks.
preColor	The background color for preformatted text blocks.
preBorderRadius	The border radius for preformatted text blocks.
preTextStyle	The text style for preformatted text blocks.
preLanguage	The language of the code in preformatted text blocks, used for syntax highlighting.

---

Default Properties

The Markdown widget supports all three sections of default-properties

Layout

• width

• height

• padding

• margin

• align

Appearance

• bgColor

• borderRadius

• border

  • borderWidth

  • borderColor

  • borderType (e.g., solid, dashed)

  • strokeAlign

Interactions

• onClick — Used to add actions to the Markdown widget.

---

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.