html_pro

An enhanced Flutter HTML widget with cached network images, link long press support, and image URL base path replacement.

Features

  • πŸ–ΌοΈ Cached Network Images: Automatically cache network images with loading indicators
  • πŸ”— Link Long Press: Support for long press callbacks on links with position information
  • 🌐 Image URL Replacement: Replace image URLs with custom base URLs for CDN or proxy support
  • ⚑ Performance Optimized: Built on top of flutter_html with enhanced functionality

Installation

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

dependencies:
  html_pro: ^0.0.1

Then run:

flutter pub get

Usage

Basic Usage

import 'package:html_pro/html_pro.dart';

FlutterHtmlPro(
  data: '''
    <h1>Hello World</h1>
    <p>This is a paragraph with an <a href="https://flutter.cn">link</a></p>
    <img src="https://example.com/image.jpg" alt="Example Image">
  ''',
)

FlutterHtmlPro(
  data: htmlContent,
  onLinkTap: (url, attributes, element) {
    print('Link tapped: $url');
  },
  onLinkLongPress: (url, attributes, element, position) {
    print('Link long pressed: $url at position: $position');
    // Show context menu or perform custom action
  },
)

With Image URL Base Path Replacement

FlutterHtmlPro(
  data: '''
    <img src="/images/photo.jpg" alt="Photo">
    <img src="https://old-domain.com/image.png" alt="Image">
  ''',
  imageBaseUrl: 'https://cdn.example.com',
  // This will transform:
  // "/images/photo.jpg" -> "https://cdn.example.com/images/photo.jpg"
  // "https://old-domain.com/image.png" -> "https://cdn.example.com/image.png"
)

Complete Example

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

class HtmlProExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HTML Pro Example')),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: FlutterHtmlPro(
          data: '''
            <h1>Enhanced HTML Widget</h1>
            <p>This widget supports:</p>
            <ul>
              <li>Cached network images</li>
              <li>Link long press callbacks</li>
              <li>Image URL replacement</li>
            </ul>
            <p>Try long pressing this <a href="https://flutter.cn">Flutter link</a></p>
            <img src="/assets/flutter-logo.png" alt="Flutter Logo">
          ''',
          imageBaseUrl: 'https://storage.flutter-io.cn/cms-storage-bucket',
          onLinkTap: (url, attributes, element) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Tapped: $url')),
            );
          },
          onLinkLongPress: (url, attributes, element, position) {
            showDialog(
              context: context,
              builder: (context) => AlertDialog(
                title: Text('Link Long Pressed'),
                content: Text('URL: $url\nPosition: $position'),
                actions: [
                  TextButton(
                    onPressed: () => Navigator.pop(context),
                    child: Text('OK'),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

API Reference

FlutterHtmlPro

All parameters from the original Html widget are supported, plus:

Parameter Type Description
onLinkLongPress Function(String?, Map<String, String>, dom.Element?, Offset)? Callback for link long press events
imageBaseUrl String? Base URL for image URL replacement

Image URL Replacement Logic

  • Relative URLs: /path/image.jpg β†’ {baseUrl}/path/image.jpg
  • Absolute URLs: https://old.com/image.jpg β†’ https://new-base.com/image.jpg (domain replacement)
  • Invalid URLs: Returns original URL without modification

Dependencies

This package depends on:

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Libraries

html_pro
Html Pro