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

Vig*_* PV 9 dart flutter

我在 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'],)
                        ],
                      )
                    )
                  ],
                )
              ),
            );
          }
        }
Run Code Online (Sandbox Code Playgroud)

liv*_*ove 15

将 flutter_html 用于富文本 html。

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

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

  • 但现在,到了 2022 年,它不起作用了,现在的方法是什么? (2认同)

Anu*_*wan 7

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

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

完整的例子,

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

  • 为这个答案点赞。但我有一个小问题。如果我想使用该软件包的最新版本怎么办?它似乎没有保留这个“customTextStyle”属性...... (4认同)