From 3301f6d3695d5dac21edcc8728ed0ec87ba0b963 Mon Sep 17 00:00:00 2001 From: Pinkesh Date: Wed, 16 Sep 2026 18:15:50 +0530 Subject: [PATCH] Update Markdown Widget --- .../ui/widgets/built-in-widgets/markdown.md | 71 ++++++++++++++++--- 1 file changed, 61 insertions(+), 10 deletions(-) diff --git a/docs/resources/ui/widgets/built-in-widgets/markdown.md b/docs/resources/ui/widgets/built-in-widgets/markdown.md index 12cff15b..3d3cedae 100644 --- a/docs/resources/ui/widgets/built-in-widgets/markdown.md +++ b/docs/resources/ui/widgets/built-in-widgets/markdown.md @@ -1,23 +1,74 @@ --- +slug: markdown +title: Markdown +description: Learn how to display and customize Markdown content in your FlutterFlow app. tags: [Base Elements] +keywords: [Markdown, Widget, Formatted Text, Dynamic Content] --- # Markdown -The Markdown widget is used to input and display text using [Markdown syntax](https://www.markdownguide.org/basic-syntax/). It allows you to format text easily, without the complexity of a full-fledged WYSIWYG (What You See Is What You Get) editor or the need to write HTML code. +The **Markdown** widget renders formatted content written using [Markdown syntax](https://www.markdownguide.org/basic-syntax/). It supports content such as headings, emphasized text, lists, links, quotes, and code without requiring HTML. -You could use this widget in various applications like note-taking apps, forums, and blogging platforms. They are particularly popular in technical and coding communities for their ease of formatting code snippets and descriptions. +Use this widget to display notes, documentation, forum posts, release notes, help content, or other formatted text in your app. -![img.png](imgs/img.png) +## Adding a Markdown Widget -## Adding Markdown widget +1. Open the [Widget Palette](../../../../intro/ff-ui/widget-palette.md) and add the **Markdown** widget from **Base Elements**. +2. Select the widget and open the [Properties Panel](../../../../intro/ff-ui/builder.md#properties-panel). +3. Under **Data**, enter fixed Markdown content or set the value from a variable. Dynamic content is useful for displaying formatted text from a database, an API response, or generated app content. -To add a Markdown widget: +For example, you can use Markdown to display a privacy policy: -1. Open the [Widget Palette](../../../../intro/ff-ui/widget-palette.md) and locate the **Markdown** widget under the **Base Elements** tab. You can either drag it into your desired location or add it directly from the widget tree. -2. To display the markdown content, move to the [Properties Panel](../../../../intro/ff-ui/builder.md#properties-panel) and enter the text inside the **Data** section. -3. Optionally, you have the choice to make your Markdown content selectable. This can be adjusted using the **Selectable** property. +```md +# Privacy Policy -
+**Last updated:** September 16, 2026 +We use your information to provide and improve our services. + +## Information we collect + +- Account information +- App usage data + +[Contact our privacy team](mailto:privacy@example.com) +``` + +
+ +
+ +## Customizing the Markdown Widget + +### Making Content Selectable + +Enable **Selectable** to allow users to select and copy text from the rendered Markdown content. + +## Best Practices + +- Use a consistent heading hierarchy to keep long content easy to scan. +- Test long and dynamic content on different screen sizes to prevent clipping or unexpected overflow. +- Review Markdown received from external sources before displaying it, especially links. +- Use descriptive link text and verify that links work on every target platform.