如何在flutter里显示html页面

（一）效果图

（二）代码，复制即运行

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: new MyHomePage(),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}
//html代码
const htmlData="""
<div style="overflow:visible;height:auto;min-height:100%;">
    <!--Main Content-->
    <div>
        <div style="padding: 20px 20px 20px 20px;">
            <!--Main-->
            <div>
                <p style="margin-top: 20px; font-size: 18px; color: #2C2C2C; line-height: 26px;"><b>前言</b></p>
                <h4>你好</h4>
                <p>
                    Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。
                </p>
                <p>
                    它也是构建未来的Google Fuchsia应用的主要方式。
                </p>
                <p>
                    Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。
                </p>
                <p>
                    它也是构建未来的Google Fuchsia应用的主要方式。
                </p>
                <p><b> </b></p>
                <p style="margin-top: 20px; font-size: 18px; color: #2C2C2C; line-height: 26px;"><b>目录</b></p>
                <p><b>1本内容将帮助您了解以下内容：</b></p>
                <p><b>一、我们如何收集和使用您的个人信息</b></p>
                <p><b>二、我们如何使用 Cookies 和同类技术</b></p>
                <p><b>三、我们如何共享、转让、公开披露您的个人信息</b></p>
                <p><b>四、我们如何存储和保护您的个人信息</b></p>
                <p><b>五、您如何访问和管理自己的个人信息</b></p>
                <p><b>六、我们如何处理未成年人的个人信息</b></p>
                <p><b>七、本政策如何更新</b></p>
                <p><b>八、如何联系我们</b></p>
                <p><b> </b></p>
                <p><b>2本内容将帮助您了解以下内容：</b></p>
                <p><b>一、我们如何收集和使用您的个人信息</b></p>
                <p><b>二、我们如何使用 Cookies 和同类技术</b></p>
                <p><b>三、我们如何共享、转让、公开披露您的个人信息</b></p>
                <p><b>四、我们如何存储和保护您的个人信息</b></p>
                <p><b>五、您如何访问和管理自己的个人信息</b></p>
                <p><b>六、我们如何处理未成年人的个人信息</b></p>
                <p><b>七、本政策如何更新</b></p>
                <p><b>八、如何联系我们</b></p>
                <b></b>
                <p><b>3本内容将帮助您了解以下内容：</b></p>
                <p><b>一、我们如何收集和使用您的个人信息</b></p>
                <p><b>二、我们如何使用 Cookies 和同类技术</b></p>
                <p><b>三、我们如何共享、转让、公开披露您的个人信息</b></p>
                <p><b>四、我们如何存储和保护您的个人信息</b></p>
                <p><b>五、您如何访问和管理自己的个人信息</b></p>
                <p><b>六、我们如何处理未成年人的个人信息</b></p>
                <p><b>七、本政策如何更新</b></p>
                <p><b>八、如何联系我们</b></p>
                <p><b> </b></p>
                <p>结束</p>
            </div>
            <!--Main-->
        </div>
    </div>
    <!--Main Content-->
</div>""";

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('flutter_html 示例'),
        centerTitle: true,
      ),
      body:
      SingleChildScrollView(
        child: Html(
          data: htmlData,//调用
///页面样式
          style: {
            "html": Style(
              backgroundColor: Colors.white,
            ),
            "h4":Style(
              width: 50,
              backgroundColor: Colors.lightBlueAccent,
            )
          },
        ),
      ),
    );
  }
}

（三）屏幕内容滚动组件补充
（1） ListView 可滚动的列表
（2） NestedScrollView 可以嵌套其它可滚动widget的widget
GridView 可滚动的二维空间数组
（3）SingleChildScrollView 有一个子widget的可滚动的widget，子内容超过父容器时可以滚动。
相当于没有延迟加载的ListView,适用于不超过屏幕太多内容的滚动效果
（4）Scrollable 实现了可滚动widget的交互模型，但不包含UI显示相关的逻辑
Scrollbar 一个Material Design 滚动条，表示当前滚动到了什么位置
（5）CustomScrollView 一个使用slivers创建自定义的滚动效的ScrollView
（6）NotificationListener 一个用来监听树上冒泡通知的widget。
（7）ScrollConfiguration 控制可滚动组件在子树中的表现行为。（8）RefreshIndicator Material Design下拉刷新指示器，包装一个可滚动widget