Language:简体中文|English

A simple and easy-to-use markdown package created by flutter.

Support TOC

Support img and Video Tags of HTML

Support highlight code

Before the introduction, you can have a try for Online Demo

import 'package:flutter/material.dart'; import 'package:markdown_widget/markdown_widget.dart'; class MarkdownPage extends StatelessWidget { final String data; MarkdownPage(this.data); @override Widget build(BuildContext context) { return Scaffold( body: Container( margin: EdgeInsets.all(10), child: buildMarkdown(), ), ); } Widget buildMarkdown() => MarkdownWidget(data: data); }

if you want to use column or other list widget, you can use MarkdownGenerator

Widget buildMarkdown() => Column(children: MarkdownGenerator(data: data).widgets,);

markdown_widget supports dark mode by default，you can use it by setting the markdownTheme of StyleConfig

Widget buildMarkdown() => MarkdownWidget( data: data, controller: controller, styleConfig: StyleConfig( markdownTheme: MarkdownTheme.lightTheme ), );

you can also custom your own markdownTheme

🏞Image and Video #

if you want to custom a widget, such as img and video:

Widget buildMarkdown() => MarkdownWidget( data: data, styleConfig: StyleConfig( imgBuilder: (String url,attributes) { return Image.network(url); }, videoBuilder: (String url,attributes) { return YourVideoWidget(); } ), );

supported markdown samples:

<video src="https://xxx.mp4" controls="controls"/> <img width="150" alt="018" src="https://xxx.png"/> ![demo](https://xxx)

if you want to custom other tag widgets, you need use WidgetConfig

you can custom link style

Widget buildMarkdown() => MarkdownWidget( data: data, styleConfig: StyleConfig( pConfig: PConfig( linkStyle: TextStyle(...), onLinkTap: (url){ _launchUrl(url); } ) ), );

you can use custom tag like this

<avatar size="12" name="tom" />

then add custom like this

MarkdownWidget( data: data, styleConfig: StyleConfig( pConfig: PConfig( custom: (m.Element node) { ... return YourCustomWidget(); }, ), ), ),

it's very easy to use TOC

final TocController tocController = TocController(); Widget buildTocWidget() => TocListWidget(controller: controller); Widget buildMarkdown() => MarkdownWidget(data: data, controller: controller); @override Widget build(BuildContext context) { return Scaffold( body: Row( children: <Widget>[ Expanded(child: buildTocWidget()), Expanded(child: buildMarkdown(), flex: 3) ], )); }

you can config lots of theme for code

import 'package:markdown_widget/config/highlight_themes.dart' as theme; Widget buildMarkdown() => MarkdownWidget( data: data, styleConfig: StyleConfig( preConfig: PreConfig( language: 'java', theme: theme.a11yLightTheme ) ), );

if you have any good idea or sugesstion, welcome for PR and issue

Here are the other packages used in markdown_widget

package explain markdown parse markdown data flutter_highlight make code highlight html parse html data video_player_web play video in flutter web video_player video interface chewie a simple and beautiful video player scrollable_positioned_list for TOC function

The reason why I created this package #

Since there is already flutter_markdown package, why should I create another one?

Because when I was creating a personal blog using flutter web, I found that flutter_markdown has many functions that are not available

I have submitted 3 issues without any responding. So I have to create a new one.