simple_html_css 2.0.0+2

  • Readme
  • Changelog
  • Example
  • Installing
  • 86

Simple Html CSS #

Pub Version GitHub

This is a fork of css_text_for_flutter

This package makes it easy for you to convert HTML and CSS text content into RichText widgets. It supports most CSS properties that are relevant to text content, except for a few. Also gives the ability to override the styles of the content passed in.

NOTE: This is not an alternative to webview packages. This package only deals with text.

Here's a sample HTML content with inline CSS styles:

<body>
    <h1 style='color: white; font-size:50px; font-style:italic; 
    background-color: rgb(0,122,255); font-weight:100;)'> Hello word! </h1>
    <h1 style=''>Convert your <span style='color:lightseagreen;'>
    HTML</span> and <span style='color:dodgerblue'>CSS</span> 
    easily into RichText</h1>
    <p>Lorem ipsum dolor sit, consectetur adipiscing elit. Pellentesque in leo 
    id dui bibendum fringilla in et arcu. In vehicula vel est sed mattis.</p>
    <p><a href="https://google.com">Need more? click this link</a></p>
    <p>We all spell <span style='color:crimson; 
    text-decoration: underline wavy;'>recieve</span> wrong.<br />Some times we 
    delete <del>stuff</del></p>
    <div style='font-size:17px'>We write things that are 
    <span style='font-size:1.5em;'>Big,</span> <b>bold</b>&nbsp; or 
    <span style='color:brown'>colorful</span></div>
    <p style='font-family:times;'>Some different FONT with 
    <span style='background-color:lightcyan;'>this part highlighted</span></p>
    <div style='line-height:2; font-size:17px;'><b style='color: rgb(0,122,255); 
    font-weight:500;'>Finally some line heights.</b> Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit. Pellentesque in leo id dui bibendum fringilla 
    in et arcu. In vehicula vel est sed mattis. Duis varius, sem non mattis.</div>
</body>

This package can automatically convert all the HTML content above into TextSpan objects or a RichText widget. Here's what the render will look like:

Sample

Getting Started #

Using simple_html_css is extremely easy. First import the library in your Dart code:

import 'package:simple_html_css/simple_html_css.dart';

You can then create TextSpan from any HTML content by calling the HTML.toTextSpan() method. Which you can use to create a RichText widget.

String htmlContent = """
<p style="font-size:1.5em;">Hello World</p>
""";

RichText(
  text: HTML.toTextSpan(context, htmlContent),
  maxLines: 4,
  //...
  );

As a shortcut, you can also use the HTML.toRichText() method.

var myRichText = HTML.toRichText(context, htmlContent);

Container(
  child: myRichText,
);

Your HTML content can have links. To handle them, you must use the linksCallback optional parameter.

String htmlContent = """<span style="font-size:2em">
Please click <a href="https://pub.dartlang.org">here</a> or 
<a href="https://old.reddit.com">here</a>.<br/>
<br/>
Go ahead! Try it.
</span>""";

var myRichText = HTML.toRichText(context, htmlContent, linksCallback: (link) {
    // You can now use the url_launcher library to open the link.
    // Or you can handle the link in your app itself. This gives you
    // complete control over your links.
    // For now, let's just print it
    print(link);
});

Apply a default style #

You can apply a global text sytle. This acts as the base text style of all content.

HTML.toTextSpan(
      context,
      htmlContent,
      defaultTextStyle: TextStyle(
        color: Colors.grey[700],
        fontSize: 12,
        // etc etc
      ),
    );

Overriding styles #

You can override the inline styles and apply global styles for each of the HTML tags in your HTML content.

String htmlContent =
   """
   <p>This has no font size css property, but global style will be applied</p>
   <a style='color: orange;'>The inline color for this is orange, but it will 
   get overridden by global style defined below</a>
   """;

HTML.toTextSpan(
      context,
      htmlContent,
      overrideStyle: {
        "p": TextStyle(fontSize: 17.3),
        "a": TextStyle(color: Colors.red),
        // specify any tag not just the supported ones,
        // and apply TextStyles to them and/override them
      },
    );

Supported HTML Tags #

Supports all tags which prints text normally like p, div, span, body etc.
And the following special tags which change the text appearance

  • <h1> - <h6>
  • <b> <strong>
  • <br> <br />
  • <i> <em>
  • <u>
  • <strike> <del> <s>
  • <a> - anchor tags with link click callback
supported Css propertysupported value(s)
font-weight100 to 900, normal, medium, bold
colorcss color name like: red, orangered etc. or rgb(0, 0, 255) or rgba(0, 0, 50, 0.5) or Hex #eee/#ff00ff/#ff005522
background-colorsame as above
font-styleitalic and normal
font-familyany valid font family. eg: times
font-sizeeg: 18px or 1.5em
text-decorationunderline, overline, none, line, dotted, dashed, wavy
line-heightany valid value. eg: 1.5

Partially supported HTML tags #

<ol> <ul> <li> These tags will be rendered on new lines, but without the number or symbol

Workaround for text not rendering properly #

Render issue

If you experienced any rendering issue like this, It is becuase you need to have the build context of a Material parent Widget such as a Scaffold or Material.

To get the context directly a quick workaround is adding a Builder

Scaffold(
  body: Builder(
    builder: (context) {
        return RichText(
          text: HTML.toTextSpan(context, htmlContent),
      );
    },
  ),
)

TODO #

  • Add support <ul> tag with correct indentation
  • Add support <ol> tag with correct indentation

[2.0.0+2] - May 11th, 2020 #

  • Fixed an issue with non self closing <br> tag
  • Improved <h1>-<h6> sizing

[2.0.0+1] - May 10th, 2020 #

  • updated README

[2.0.0] - May 10th, 2020 #

  • Breaking change Updated deprecated terms in Flutter v 1.17.0 (Only use this version if you are using flutter v1.17.0 or greater)
  • Breaking change Updated dependency
  • Added support for defaultTextStyle

[1.0.2+5] - May 10th, 2020 #

  • Reverted to restore backwards compatibility in minor version update

[1.0.2+4] - May 8th, 2020 #

  • Updated deprecated terms
  • Updated dependency
  • Added some TODOs in README

[1.0.2+3] - April 27th, 2020 #

  • Updated README explaining a render issue

[1.0.2+2] - April 26th, 2020 #

  • Downgraded xml dependency to prevent version solving failure.

[1.0.2+1] - April 24th, 2020 #

  • Fixed changelog

[1.0.2] - April 24th, 2020 #

  • Added partial support for <ol> <ul> <li>
  • Updated to readme

[1.0.1] - April 24th, 2020 #

  • Updated to latest XML dependency

[1.0.0] - April 24th, 2020 #

  • Initial release of the forked project.
  • Added support for a few more html tags
  • Added support for a few more css properties
  • Added support for global style overriding

example/lib/main.dart

import 'package:simple_html_css/simple_html_css.dart';
import 'package:flutter/material.dart';

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

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String htmlContent = """
<body>

<h1 style='color: white; font-size:50px; font-style:italic; background-color: rgb(0,122,255); font-weight:100;)'> Hello word! </h1>
<h1 style=''>Convert your <span style='color:lightseagreen;'>HTML</span> and <span style='color:dodgerblue'>CSS</span> easily into RichText</h1>
<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Pellentesque in leo id dui bibendum fringilla in et arcu. In vehicula vel est sed mattis.</p>
<p><a href="https://google.com">Need more? click this link</a></p>
<p>We all spell <span style='color:crimson; text-decoration: underline wavy;'>recieve</span> wrong.<br />Some times we delete <del>stuff</del></p>
<div style='font-size:17px'>We write things that are <span style='font-size:1.5em;'>Big,</span> <b>bold</b>&nbsp; or <span style='color:brown'>colorful</span></div>
<p style='font-family:times;'>Some different FONT with <span style='background-color:lightcyan;'>this part highlighted</span></p>
<div style='line-height:2; font-size:17px'><b style='color: rgb(0,122,255); font-weight:500;'>Finally some line heights.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in leo id dui bibendum fringilla in et arcu. In vehicula vel est sed mattis. Duis varius, sem non mattis.</div>

</body>
""";

    // or use HTML.toRichText()
    var textSpan = HTML.toTextSpan(
      context,
      htmlContent,
      linksCallback: (link) {
        print("You clicked on $link");
      },
      // as name suggests, optionally set the default text style
      defaultTextStyle: TextStyle(color: Colors.grey[700]),
      overrideStyle: {
        "p": TextStyle(fontSize: 17.3),
        "a": TextStyle(wordSpacing: 2),
        // specify any tag not just the supported ones,
        // and apply TextStyles to them and/override them
      },
    );

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("Demo")),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: RichText(text: textSpan),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  simple_html_css: ^2.0.0+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:simple_html_css/simple_html_css.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
76
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
86
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [simple_html_css] that is in a package requiring null.

Health suggestions

Format lib/src/html_stylist.dart.

Run flutter format to format lib/src/html_stylist.dart.

Maintenance issues and suggestions

Support latest dependencies. (-10 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency (xml).

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
html_unescape ^1.0.1+3 1.0.1+3
xml ^3.6.1 3.7.0 4.2.0
Transitive dependencies
charcode 1.1.3
collection 1.14.12 1.14.13
convert 2.1.1
meta 1.1.8 1.2.1
petitparser 3.0.4
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
flutter_test