NonStop

Digital Product Development Experts for Startups & Enterprises

About | Website

HTML Rich Text #

A lightweight Flutter package for rendering HTML-styled text without heavy dependencies. Perfect for simple HTML text rendering with minimal overhead.

[HTML Rich Text Demo]

Overview #

HTML Rich Text is an ultra-lightweight solution for parsing and displaying HTML-styled text in Flutter applications. Unlike traditional HTML rendering packages that include full DOM parsing and heavy dependencies, this package uses a simple regex-based approach to parse only the tags you need.

Why It's Lightweight #

• Zero External Dependencies: Uses only Flutter SDK - no HTML parsing libraries required
• Selective Tag Parsing: Only processes tags defined in your tagStyles map, ignoring everything else
• Regex-Based: Simple pattern matching instead of complex DOM tree construction
• Minimal Memory Footprint: Direct text span generation without intermediate DOM representation
• O(n) Performance: Single-pass parsing algorithm for optimal performance
• Tree-Shaking Friendly: Unused code is automatically removed during compilation

Getting Started #

1. Add html_rich_text to your pubspec.yaml:

   dependencies:
     flutter:
       sdk: flutter
     html_rich_text: ^1.0.0
   

2. Run flutter pub get to fetch the package.

Import the Package #

import 'package:html_rich_text/html_rich_text.dart';

Usage #

Basic Example #

HtmlRichText(
  'Hello <b>World</b>! This is <i>italic</i> text.',
  tagStyles: {
    'b': TextStyle(fontWeight: FontWeight.bold),
    'i': TextStyle(fontStyle: FontStyle.italic),
  },
)

Advanced Example with Custom Styling #

HtmlRichText(
  'Welcome to <b>Flutter</b>! Check out this <i>amazing</i>, <strong>powerful</strong> and <u>lightweight</u> package.',
  style: TextStyle(fontSize: 16, color: Colors.black87),
  tagStyles: {
    'b': TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
    'i': TextStyle(fontStyle: FontStyle.italic, color: Colors.green),
    'strong': TextStyle(fontWeight: FontWeight.w900, color: Colors.red),
    'u': TextStyle(decoration: TextDecoration.underline),
  },
  textAlign: TextAlign.center,
  maxLines: 3,
  overflow: TextOverflow.ellipsis,
)

Supported Parameters #

• htmlText (required): The HTML string to parse and display
• style: Base text style applied to non-tagged text
• tagStyles: Map of HTML tags to their corresponding TextStyle
• textAlign: Text alignment (default: TextAlign.start)
• maxLines: Maximum number of lines to display
• overflow: How overflowing text should be handled

Example Use Cases #

Product Descriptions #

HtmlRichText(
  'This product is <b>amazing</b>! Features include <i>lightweight design</i>, <strong>superior quality</strong> and <u>great value</u>.',
  tagStyles: {
    'b': TextStyle(fontWeight: FontWeight.bold),
    'i': TextStyle(fontStyle: FontStyle.italic),
    'strong': TextStyle(fontWeight: FontWeight.w900, color: Colors.orange),
    'u': TextStyle(decoration: TextDecoration.underline),
  },
)

Chat Messages #

HtmlRichText(
  'User said: <b>Hello!</b> How are you <i>today</i>?',
  tagStyles: {
    'b': TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
    'i': TextStyle(fontStyle: FontStyle.italic, color: Colors.grey),
  },
)

News Articles #

HtmlRichText(
  '<b>Breaking News:</b> Flutter releases <i>amazing</i> new features!',
  style: TextStyle(fontSize: 18),
  tagStyles: {
    'b': TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
    'i': TextStyle(fontStyle: FontStyle.italic, color: Colors.red),
  },
)

Performance Comparison #

Compared to traditional HTML rendering packages:

• 90% smaller package size
• 5x faster parsing for simple HTML
• Zero external dependencies
• Minimal memory allocation

Limitations #

This package is designed for simple HTML text styling. It does not support:

• Nested tags
• Attributes (like class, style, or href)
• Complex HTML structures (tables, lists, etc.)
• Images or other media
• CSS styling

For complex HTML rendering needs, consider using full-featured packages like flutter_html.

Contributing #

We welcome contributions in various forms:

• Proposing new features or enhancements
• Reporting and fixing bugs
• Improving documentation
• Sending Pull Requests

Contact #

Follow us, stay up to date or reach out on:

• LinkedIn
• X.com
• Instagram
• YouTube
• Email