markdown_widget 1.2.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 90

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.

[1.2.2] - fix issue #36, expose some properties in TocController by #40

[1.2.1] - fix issue #25 #28 #29 #32

[1.2.0] - add TextConfig to set TextAlign and TextDirection,solve issue #21

[1.1.9] - add initialIndex and isInitialIndexForTitle in TocController to solve #22

[1.1.8] - add some property to MarkdownWidget, fix PreWidget null error

[1.1.7] - make PreWidget match its parent's size

[1.1.6] - add text to PreWrapper

[1.1.5] - add PreWrapper, and HighlightCode can be automatically detected with null language

[1.1.4] - fix issue #13 and #16, deprecated compute function

[1.1.3] - add loadingWidget before data is ready, improve performance in the first rendering

[1.1.2] - support dark mode now! see issue #12

[1.1.1] - offer custon html tag to user, fix issue #8

[1.1.0] - fix issue #6

[1.0.9] - add LinkGesture to PConfig to fix issue #4

[1.0.8] - add CommonStyle to title, add selectable to PConfig

[1.0.7] - fix ImgBuilder send a null image url

[1.0.6] - fix ImgBuilder not working correctly

[1.0.5] - Add CodeConfig, format code and change markdown_widget description

[1.0.4] - Add ImgConfig, Improve code description and online demo

[1.0.3] - Fix TocListWidget data error in mobile, edit README

[1.0.2] - Reduce the difficulty of TOC function, improve the basic functions of the package

[1.0.1] - Add ImgConfig, clear data when markdown_widget rebuilded

[1.0.0] - Complete base functions

example/lib/main.dart

import 'package:flutter/material.dart';

import 'my_app.dart';

void main() => runApp(MyApp());

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  markdown_widget: ^1.2.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:markdown_widget/markdown_widget.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
80
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
90
Learn more about scoring.

We analyzed this package on Jul 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform Linux

Because:

  • package:markdown_widget/markdown_widget.dart that imports:
  • package:markdown_widget/config/style_config.dart that imports:
  • package:markdown_widget/tags/all_tags.dart that imports:
  • package:markdown_widget/tags/video.dart that imports:
  • package:video_player/video_player.dart that declares support for platforms: Android, iOS, Web

Package does not support Flutter platform Web

Because:

  • package:markdown_widget/markdown_widget.dart that imports:
  • package:markdown_widget/config/style_config.dart that imports:
  • package:markdown_widget/tags/all_tags.dart that imports:
  • package:markdown_widget/tags/video.dart that imports:
  • package:chewie/chewie.dart that imports:
  • package:chewie/src/chewie_player.dart that imports:
  • package:wakelock/wakelock.dart that declares support for platforms: Android, iOS

Package does not support Flutter platform Windows

Because:

  • package:markdown_widget/markdown_widget.dart that imports:
  • package:markdown_widget/config/style_config.dart that imports:
  • package:markdown_widget/tags/all_tags.dart that imports:
  • package:markdown_widget/tags/video.dart that imports:
  • package:video_player/video_player.dart that declares support for platforms: Android, iOS, Web

Package does not support Flutter platform macOS

Because:

  • package:markdown_widget/markdown_widget.dart that imports:
  • package:markdown_widget/config/style_config.dart that imports:
  • package:markdown_widget/tags/all_tags.dart that imports:
  • package:markdown_widget/tags/video.dart that imports:
  • package:video_player/video_player.dart that declares support for platforms: Android, iOS, Web

Package not compatible with SDK dart

Because:

  • markdown_widget that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
chewie ^0.9.10 0.9.10
flutter 0.0.0
flutter_highlight ^0.6.0 0.6.0
highlight ^0.6.0 0.6.0
html ^0.14.0+3 0.14.0+3
markdown ^2.1.5 2.1.5
scrollable_positioned_list ^0.1.3 0.1.6
video_player ^0.10.5 0.10.11+2
video_player_web ^0.1.2+1 0.1.3+2
Transitive dependencies
args 1.6.0
charcode 1.1.3
collection 1.14.12 1.14.13
csslib 0.16.1
flutter_web_plugins 0.0.0
meta 1.1.8 1.2.2
open_iconic_flutter 0.3.0
path 1.7.0
sky_engine 0.0.99
source_span 1.7.0
term_glyph 1.1.0
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
video_player_platform_interface 2.0.2
wakelock 0.1.4+2
Dev dependencies
flutter_test