Flutter Widget from HTML 项目教程

1. 项目的目录结构及介绍

flutter_widget_from_html/
├── demo_app/
├── docs/
├── packages/
│   ├── fwfh_cached_network_image/
│   ├── fwfh_chewie/
│   ├── fwfh_just_audio/
│   ├── fwfh_svg/
│   ├── fwfh_url_launcher/
│   ├── fwfh_webview/
│   └── flutter_widget_from_html_core/
├── tool/
├── .devcontainer/
├── .git-crypt/
├── .github/
├── .vscode/
├── .codecov.yml
├── .gitattributes
├── .gitignore
├── .renovate.json
├── LICENSE
├── README.md
├── SECURITY.md
└── pubspec.yaml

目录结构介绍

• demo_app/: 包含项目的演示应用程序。
• docs/: 包含项目的文档文件。
• packages/: 包含项目的各个子包，如图像加载、视频播放等。
• tool/: 包含项目的工具脚本。
• .devcontainer/: 包含开发容器的配置文件。
• .git-crypt/: 包含 Git 加密的配置文件。
• .github/: 包含 GitHub 相关的配置文件。
• .vscode/: 包含 Visual Studio Code 的配置文件。
• .codecov.yml: 代码覆盖率配置文件。
• .gitattributes: Git 属性配置文件。
• .gitignore: Git 忽略文件配置。
• .renovate.json: Renovate 自动化依赖更新配置文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• SECURITY.md: 安全策略文档。
• pubspec.yaml: 项目的依赖和配置文件。

2. 项目的启动文件介绍

项目的启动文件通常位于 demo_app/ 目录下，具体文件名为 main.dart。该文件是 Flutter 应用程序的入口点，负责初始化应用并启动主界面。

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

void main() {
  runApp(MyApp());
}

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Widget from HTML Demo'),
      ),
      body: Center(
        child: HtmlWidget(
          '''
          <h1>Hello, world!</h1>
          <p>This is a demo of Flutter Widget from HTML.</p>
          ''',
        ),
      ),
    );
  }
}

启动文件介绍

• main.dart: 应用程序的入口文件，定义了应用的启动逻辑和主界面。
• MyApp: 应用的主类，继承自 StatelessWidget，负责构建应用的基本结构。
• MyHomePage: 应用的主页面，包含一个 HtmlWidget 用于渲染 HTML 内容。

3. 项目的配置文件介绍

项目的配置文件主要为 pubspec.yaml，该文件定义了项目的依赖、版本、资源等信息。

name: flutter_widget_from_html
description: A Flutter package to render HTML as widgets.
version: 0.15.1
homepage: https://github.com/daohoangson/flutter_widget_from_html

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_widget_from_html_core: ^0.15.1
  fwfh_cached_network_image: ^0.15.1
  fwfh_chewie: ^0.15.1
  fw