markdown_widget 1.2.4

Flutter Android iOS

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

🎈hightlight 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
chewiea simple and beautiful video player
scrollable_positioned_listfor 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.

32
likes
90
pub points
81%
popularity

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)
View/report issues

Documentation

API reference

Uploader

agedchen@gmail.com

License

MIT (LICENSE)

Dependencies

chewie, flutter, flutter_highlight, highlight, html, markdown, scrollable_positioned_list, video_player, video_player_web

More

Packages that depend on markdown_widget