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
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"/>
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 |
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent