markdown_widget 1.3.0+2 icon indicating copy to clipboard operation
markdown_widget: ^1.3.0+2 copied to clipboard

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 #

support Flutter Web pub package demo

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

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

packageexplain
markdownparse markdown data
flutter_highlightmake code highlight
htmlparse html data
video_player_webplay video in flutter web
video_playervideo interface
scrollable_positioned_listfor TOC function
96
likes
140
pub points
91%
popularity

Publisher

unverified uploader

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

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

collection, flutter, flutter_highlight, highlight, html, markdown, video_player, video_player_web

More

Packages that depend on markdown_widget