Refined Markdown

pub travis

What is it?

A simple Markdown renderer (for now) that is written mostly in dart (grammar analysing and rendering part).

Demo preview

demo1 demo2 demo3 demo4 demo5

How to use it?

Using RefinedMarkdown is simple. What you need to do is generally like this:

// main.dart
import 'package:flutter/material.dart';
import 'package:refined_markdown/refined_markdown.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MarkdownPage(),
    );
  }
}

class MarkdownPage extends StatefulWidget {
  @override
  _MarkdownPageState createState() => _MarkdownPageState();
}

class _MarkdownPageState extends State<MarkdownPage> {
  @override
  Widget build(BuildContext context) {
    CSS baseCSS = CSS();
    baseCSS.fontSize = 13;
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: Text('Markdown Test'),
      ),
      body: RefinedMarkdown(
        text: r"""
        Contents that are written in Markdown format
				""",
        css: baseCSS,
      ),
    );
  }
}

The key part of the code above is:

@override
  Widget build(BuildContext context) {
    CSS baseCSS = CSS();
    baseCSS.fontSize = 13;
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: Text('Markdown Test'),
      ),
      body: RefinedMarkdown(
        text: r"""
        Contents that are written in Markdown format
        """,
        css: baseCSS,
      ),
    );
  }

What are supported now?

taml, code block, code segmentation, task list, normal list, sequence list, title, bold text, italic text, delete line, text highlight, text style, network photo, link, divider

What are the meanings of those params?

RefinedMarkdown

paramtypeexplanationis required
textStringThe raw text of a markdown string, please notice that.yes
cssCSSThe cascading style sheet (in concept) that helps you build the basic style of your markdown texts to be rendered. In detail, The rendered text style like the style of “## header2” will be rendered on the basis of the basic style (baseCSS in code demo above).yes

CSS

paramtypedefault valueexplanationis required
fontSizeint11The size of the textno
fontColorColorColors.black87The color of the textno
backgroundColorColorColors.transparentThe color of the background of each textno
isItalicboolfalseWhether the text is displayed in bold styleno
isBoldboolfalseWhether the text is displayed in italic styleno
deletedboolfalseWhether the text is shown with line-throughno
underlineboolfalseWhether to show an underlineno

Using packages

What’s more

This package is using its own way to transfer markdown string to flutter widget without using any html/markdown packages for the base. It still get long way to go. More markdown standards will be supported in later version of refined_markdown in the following versions this summer :)

Libraries

refined_markdown