如何在 Flutter 中更改 Html 小部件中的字体样式？答案

【问题标题】：How to change Font style in Html widget in Flutter?如何在 Flutter 中更改 Html 小部件中的字体样式？
【发布时间】：2019-12-06 22:51:05
【问题描述】：

我在 Flutter 中使用 HTML 包添加了来自 Json Rest API 的帖子描述。默认字体大小看起来太小了。如何增加以下内容的字体大小 - Html(data: user['news_description'],),

import 'package:flutter_html/flutter_html.dart';

    class NewsDetails extends StatelessWidget {
          var user;
          var image_url = 'http://example.com/news/upload/';
          NewsDetails(this.user);

          @override
          Widget build(BuildContext context) {
            return Scaffold(
              body: SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    Image.network(image_url + user['news_image'],  width: double.infinity, height: 300.0, fit: BoxFit.cover,),
                    SizedBox(height:5.0),
                    Padding(padding: EdgeInsets.all(15.0),
                      child: Column(
                        children: <Widget>[
                          Text(user['news_title'],
                            style: TextStyle(fontSize: 22.0, fontWeight: FontWeight.w400),),
                          SizedBox(height:10.0),
                        Html( data: user['news_description'],)
                        ],
                      )
                    )
                  ],
                )
              ),
            );
          }
        }

【问题讨论】：

标签： flutter dart

【解决方案1】：

将 flutter_html 用于富文本 html。

试试这个代码来改变 Html 字体样式：

Html(
    data: 'my text',
    style: {
    "body": Style(
    fontSize: FontSize(18.0),
    fontWeight: FontWeight.bold,
    ),
    },
)

【讨论】：

【解决方案2】：

您可以使用 customTextStyle 来更改字体大小。

customTextStyle: (dom.Node node, TextStyle baseStyle) {
              return baseStyle.merge(TextStyle(height: 2, fontSize: 28));
              }

完整示例，

 Html( data: user['news_description'],
       customTextStyle: (dom.Node node, TextStyle baseStyle) {
                  return baseStyle.merge(TextStyle(height: 2, fontSize: 28));
                  })

【讨论】：

如何在 Flutter 中更改表格的宽度以显示全屏宽度？
支持这个答案。但我有一个小问题。如果我想使用这个包的最新版本怎么办？它似乎没有保留这个customTextStyle 属性...

【解决方案3】：

我们可以使用defaultTextStyle试试这个代码

    Html(
     data: "<b>Hai</b>,
     defaultTextStyle: TextStyle(
       fontSize: 15,
       color: Colors.blue,
       fontWeight: FontWeight.bold),
    ),

【讨论】：