flutter如何使用html渲染

在Flutter中如何实现HTML内容的渲染？我需要在应用中显示包含简单HTML标签（如加粗、链接）的文本，但不想用WebView。有没有轻量级的解决方案？官方是否有支持的插件，或者推荐哪些第三方库（如flutter_html）能稳定实现这个功能？使用时需要注意哪些兼容性问题？

2 回复

Flutter中可使用flutter_html或webview_flutter库渲染HTML。前者轻量，后者支持完整网页。安装后直接调用组件即可显示HTML内容。

更多关于flutter如何使用html渲染的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过以下方式渲染HTML内容：

1. 使用 webview_flutter 插件

这是最常用的方式，可以完整渲染HTML页面。

安装依赖：

dependencies:
  webview_flutter: ^4.4.2

基本用法：

import 'package:webview_flutter/webview_flutter.dart';

class HtmlViewer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'data:text/html;charset=utf-8,${Uri.encodeComponent('''
        <html>
          <body>
            <h1>Hello Flutter</h1>
            <p>This is HTML content</p>
          </body>
        </html>
      ''')}',
      javascriptMode: JavascriptMode.unrestricted,
    );
  }
}

2. 使用 flutter_html 插件

适合简单的HTML标签渲染，性能更好。

安装依赖：

dependencies:
  flutter_html: ^3.0.0-alpha.6

基本用法：

import 'package:flutter_html/flutter_html.dart';

Html(
  data: """
    <h1>标题</h1>
    <p>这是一个段落</p>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
    </ul>
  """,
)

3. 使用 url_launcher 打开外部浏览器

import 'package:url_launcher/url_launcher.dart';

void launchHtml() async {
  const htmlContent = '''
    <html><body><h1>Hello World</h1></body></html>
  ''';
  final encoded = Uri.encodeComponent(htmlContent);
  final url = 'data:text/html;charset=utf-8,$encoded';
  
  if (await canLaunch(url)) {
    await launch(url);
  }
}

选择建议：

  • 复杂HTML页面：使用 webview_flutter
  • 简单HTML标签：使用 flutter_html
  • 外部打开：使用 url_launcher

根据你的具体需求选择合适的方案。

回到顶部