flutter_html_textview_render 0.1.3

flutter_html_text_view #

Flutter package for rendering html tags as a TextView; It was created because of the lack of transforming simple htmls with text into a textview or a webview

How to use #

HtmlTextView is a widget, so it can be a child of any widget. It has support for using custom font from the assets folder, the anchors can be set to an specified color

HtmlTextView( data: "<div style='color: #7B7B7B;'><h1>Testing the
control</h1> <p>A lorem ipsum to <b>fill the gap</b></p><a
href="http://flutter.com"> Or it can be a link</a></div>", customFont:
"font in your assets declared in your project", customFontBold: "font in
your assets declared in your project", anchorColor: Color(0xFFFF0000),

Supported tags #

  • a
  • strong
  • em
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • p

Supported elements in style #

  • href - for anchors
  • text-align; left, center and right
  • color; default color is black

[0.1.3] - March 1, 2019

  • Linebreak case

[0.1.2] - March 1, 2019

  • Size in linebreak

[0.1.1] - March 1, 2019

  • a is only supported inside p's or h's.

[0.1] - February 28, 2019

  • Example added

[0.0.2] - February 28, 2019

  • Adding health :)

[0.0.1] - February 28, 2019

  • Initial release
  • Support for a, p, strong, em, h1, h2, h3, h4, h5, h6
  • Support for color, href and text-align


import 'package:flutter/material.dart';
import 'package:flutter_html_textview_render/html_text_view.dart';

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

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      home: MyHomePage(title: 'Flutter Demo Home Page'),

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    String html = "<h1 style='text-align: center'>H1 centered</h1>" +
        "</br></br></br>" +
        "<h2 style='text-align: right'><strong><a href='http://pixzelle.mx'>Anchor with header</a></strong></h2>" +
        "</br>" +
        "<p style='color: #000000'>Hello World after line breaks and with custom color.</p>" +
        "<h2 style='text-align: right'>H2 aligned to the right with parent color</h2>" +
        "<p><a href='http://www.pixzelle.mx'>An anchor with the color established in the construction</a></p>" +
        "<p>This is an example of a <strong><a href='http://pixzelle.mx'>multiline p with various tags</a></strong>, it supports <em>italic</em>," +
        "<strong>bold</strong>, <em><strong>combinations</strong></em>, <a href='http://www.pixzelle.mx'>anchors</a>.</p><br/>" +
        "<p>We also can combine <a href='http://pixzelle.mx'><strong><em>Anchors with bold and italic</em></strong></a>." +
        "<p style='text-align: center; color: #00FF00'>" +
        "For styles, for the moment only text-alignment(left, center and right) and color for the font(HEX: #00FF00)." +
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      body: Container(
          margin: EdgeInsets.all(16.0),
          child: HtmlTextView(
            data: "<div style='color: #0000ff'>$html</div>",
            anchorColor: Color(0xFFFF0000),

Use this package as a library

1. Depend on it

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

  flutter_html_textview_render: ^0.1.3

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:flutter_html_textview_render/html_container.dart';
import 'package:flutter_html_textview_render/html_node.dart';
import 'package:flutter_html_textview_render/html_parser.dart';
import 'package:flutter_html_textview_render/html_text_view.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

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

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Health issues and suggestions

Document public APIs. (-0.55 points)

64 out of 65 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Format lib/html_container.dart.

Run flutter format to format lib/html_container.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 (html).


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
flutter 0.0.0
html ^0.13.3+3 0.13.4+2 0.14.0+3
url_launcher ^5.0.0 5.4.2
Transitive dependencies
charcode 1.1.3
collection 1.14.11 1.14.12
csslib 0.15.0 0.16.1
flutter_web_plugins 0.0.0
meta 1.1.8
path 1.6.4
plugin_platform_interface 1.0.2
sky_engine 0.0.99
source_span 1.6.0
term_glyph 1.1.0
typed_data 1.1.6
url_launcher_macos 0.0.1+4
url_launcher_platform_interface 1.0.6
url_launcher_web 0.1.1+1
utf 0.9.0+5
vector_math 2.0.8
Dev dependencies