Working With Markdown in Flutter, Dart

Working With Markdown in Flutter, Dart

Rendering markdown in Flutter apps. Will look at markdown, flutter_markdown and markdown_widget packages.

Feb 17, 2022ยท

1 min read

Hey ๐Ÿ‘‹, Prince here from Desi Programmer. Let's talk about rendering markdown using Flutter.

Markdown

The markdown package , written purely in Dart, parses markdown content into HTML. Not something that we are interested in right now, Although you can use this to show the output in a webview.

flutter_markdown

flutter_markdown package gives us flutter widgets from the markdown.

Elements

Almost all elements are rendered nicely including images and checkbox.

Code

Code is also rendered well, but syntax highlighting is not well supported and can't change themes.

Checkboxes

By default the checkbox are rendered nicely, but to make them work, we need to config the checkbox.

Video

We can use an Image with link and when tapped can play the video in external video player.

flutter_markdown.png

markdown_widget

markdown_widget is another package that handles the job pretty well.

Elements

Almost all elements are rendered nicely including images.

Code

Code is also rendered well, syntax highlighting is well supported and can also change themes.

Checkboxes

By default the checkbox are not rendered sometimes.

Video

We can use an Image with link and when tapped can play the video in external video player.

markdown_widget.png

ย