Question

我使用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'],)
                        ],
                      )
                    )
                  ],
                )
              ),
            );
          }
        }

Answer 1

使用flutter_html作为RTF文本。

请尝试使用以下代码更改HTML字体样式：

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

Answer 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));
                  })

Answer 3

我们可以使用import { NgbModule } from '@ng-bootstrap/ng-bootstrap';尝试使用此代码

defaultTextStyle

如何在Flutter中将字体样式添加到HTML小部件？

3 个答案: