markdown_widget 1.2.6-nullsafety

A new markdown package. It supports TOC function, HTML video and img tag，and it works well on both the web and mobile

Language:简体中文|English

📖markdown_widget

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

• Support TOC
• Support img and Video Tags of HTML
• Support highlight code

🚀Getting Started

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

🔑Useage

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,);

🌠Dark theme

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

🔗Links

you can custom link style

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

🍑Custom Tag

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();
                },
              ),
            ),
          ),

📜TOC

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)
      ],
    ));
  }

🎈Highlight code

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

appendix

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
scrollable_positioned_list	for TOC function