求助：使用flutter_html_view插件时Flutter报错的解决方法

嘿，我看你遇到的问题是用flutter_html_view展示包含表格的HTML时出错了，这其实是因为flutter_html_view这个包对复杂HTML元素（比如表格）的支持非常有限，而且这个包已经很久没有更新维护了，对新的Flutter版本兼容性也不好。

给你两个关键的解决方案：

1. 替换为更强大的HTML渲染包 #

推荐使用flutter_html包，它支持绝大多数常用的HTML标签（包括表格、列表、样式等），而且一直在维护，兼容性更好。

首先，在你的pubspec.yaml里替换依赖：

# 移除原来的flutter_html_view
dependencies:
  flutter:
    sdk: flutter
  flutter_html: ^3.0.0 # 可使用最新稳定版本

然后执行flutter pub get更新依赖。

2. 修改你的代码适配新包 #

把原来的HtmlView组件替换成flutter_html里的Html组件，代码调整如下：

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

class Unit extends StatelessWidget {
  Unit();

  @override
  Widget build(BuildContext context) {
    String html = "<h3>Physical Quantities</h3> <p>Physical quantities may be divided in two classes:</p> <p>1. Scalar Quantities</p> <p>2. Vector Quantities</p> <p>-A scalar quantity is one which has only magnitude.</p> <p>-A vector quantity has both magnitude and direction.</p> <p>-Force, Velocity, Momentum, Acceleration are examples of vector quantities.</p> <p>-Mass, length, time, volume, speed, energy, work are examples of scalar quantities.</p> <p> </p> <h3>Units</h3> <p><br />-All measurements in physics require standard units.</p> <p>-In 1960, the General Conference of Weights and Measures recommended that a metric system of measurements called the International System of Units, abbreviated as SI units, be used.</p> <p> </p> <h3>Some Important Units</h3> <table style=\"height: 379px; width: 319px; border-color: #766B69;\"> <tbody> <tr style=\"height: 17px;\"> <td style=\"width: 59.2px; height: 17px;\">S. No.</td> <td style=\"width: 84px; height: 17px;\">Units</td> <td style=\"width: 155.2px; height: 17px;\">Quantity</td> </tr> <tr style=\"height: 17px;\"> <td style=\"width: 59.2px; height: 17px;\">1.</td> <td style=\"width: 84px; height: 17px;\">Metre</td> <td style=\"width: 155.2px; height: 17px;\">Length</td> </tr> <tr style=\"height: 17px;\"> <td style=\"width: 59.2px; height: 17px;\">2.</td> <td style=\"width: 84px; height: 17px;\">Kilogram</td> <td style=\"width: 155.2px; height: 17px;\">Mass</td> </tr> <tr style=\"height: 17px;\"> <td style=\"width: 59.2px; height: 17px;\">3.</td> <td style=\"width: 84px; height: 17px;\">Second</td> <td style=\"width: 155.2px; height: 17px;\">Time</td> </tr> <tr style=\"height: 17px;\"> <td style=\"width: 59.2px; height: 17px;\">4.</td> <td style=\"width: 84px; height: 17px;\">Ampere</td> <td style=\"width: 155.2px; height: 17px;\">Electric current</td> </tr> <tr style=\"height: 17px;\"> <td style=\"width: 59.2px; height: 17px;\">5.</td> <td style=\"width: 84px; height: 17px;\">Candela</td> <td style=\"width: 155.2px; height: 17px;\">Luminous intensity</td> </tr> <tr style=\"height: 17px;\"> <td style=\"width: 59.2px; height: 17px;\">6.</td> <td style=\"width: 84px; height: 17px;\">Newton</td> <td style=\"width: 155.2px; height: 17px;\">Force</td> </tr> <tr style=\"height: 17px;\"> <td style=\"width: 59.2px; height: 17px;\">7.</td> <td style=\"width: 84px; height: 17px;\">Joule</td> <td style=\"width: 155.2px; height: 17px;\">Workdone</td> </tr> <tr style=\"height: 17px;\"> <td style=\"width: 59.2px; height: 17px;\">9.</td> <td style=\"width: 84px; height: 17px;\">Watt</td> <td style=\"width: 155.2px; height: 17px;\">Power</td> </tr> <tr style=\"height: 17px;\"> <td style=\"width: 59.2px; height: 17px;\">10.</td> <td style=\"width: 84px; height: 17px;\">Coulomb</td> <td style=\"width: 155.2px; height: 17px;\">Quantity of Electricity</td> </tr> <tr style=\"height: 17px;\"> <td style=\"width: 59.2px; height: 17px;\">11.</td> <td style=\"width: 84px; height: 17px;\">Volt</td> <td style=\"width: 155.2px; height: 17px;\">Potential Difference</td> </tr> <tr style=\"height: 17px;\"> <td style=\"width: 59.2px; height: 17px;\">12.</td> <td style=\"width: 84px; height: 17px;\">Ohm</td> <td style=\"width: 155.2px; height: 17px;\">Electrical Resistance</td> </tr> <tr style=\"height: 17px;\"> <td style=\"width: 59.2px; height: 17px;\">13.</td> <td style=\"width: 84px; height: 17px;\">Henry</td> <td style=\"width: 155.2px; height: 17px;\">Inductance</td> </tr> <tr style=\"height: 26.05px;\"> <td style=\"width: 59.2px; height: 26.05px;\">14.</td> <td style=\"width: 84px; height: 26.05px;\">...</td></tr></tbody></table>";

    return Scaffold(
      body: SingleChildScrollView(
        // 加上滚动组件避免长内容布局溢出
        child: Html(data: html),
      ),
    );
  }
}

额外说明 #

• 我给代码加上了SingleChildScrollView，防止长内容导致的布局溢出问题；
• flutter_html还支持自定义样式、处理链接等更多功能，完全能覆盖你的需求；
• 如果你坚持要用flutter_html_view，那只能去掉HTML里的表格标签，改用其他方式展示表格内容，但这显然不是最优解。

内容的提问来源于stack exchange，提问作者Abhijit leihaorambam