Flutter-Html

最新推荐文章于 2024-08-21 09:41:36 发布

s－010101

最新推荐文章于 2024-08-21 09:41:36 发布

阅读量2.9k

点赞数

分类专栏： Flutter 文章标签： flutter html 前端 android dart

本文链接：https://blog.csdn.net/m0_46527751/article/details/122709586

版权

Flutter 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

Flutter-Html

一个Flutter小部件，用于将HTML和CSS呈现为Flutter小部件。
使用时参考链接：https://pub.dev/packages/flutter_html

data内是html，在Html()还可以配置style等属性

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

class HtmlPage extends StatefulWidget {
  HtmlPage({Key? key}) : super(key: key);

  @override
  State<HtmlPage> createState() => _HtmlPageState();
}

class _HtmlPageState extends State<HtmlPage> {
  @override
  Widget build(BuildContext context) {
    return Html(
      data: """<div>
        <h1>Demo Page</h1>
        <p>This is a fantastic product that you should buy!</p>
        <h3>Features</h3>
        <ul>
          <li>It actually works</li>
          <li>It exists</li>
          <li>It doesn't cost much!</li>
        </ul>
        <!--You can pretty much put any html in here!-->
      </div>""",
      style: {
        "h1":Style(
          fontSize: FontSize.em(5)
        ),
        "html": Style(
          backgroundColor: Colors.white,
        ),
        "p": Style(fontSize: FontSize.large),
        "table": Style(
          backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee),
        ),
        "tr": Style(
          border: Border(bottom: BorderSide(color: Colors.grey)),
        ),
        "th": Style(
          padding: EdgeInsets.all(6),
          backgroundColor: Colors.grey,
        ),
        "td": Style(
          padding: EdgeInsets.all(6),
          alignment: Alignment.topLeft,
        ),
      },
    );
  }
}