Flutter_widget_from_html: Override `font-size` for entire widget?

[markst]

We have multiple blocks of html from different sources, some which contain the font-size definitions such as:

<p><span style=\"font-family:tahoma,verdana,arial,helvetica,bitstream vera sans,sans-serif; font-size:12px\">Progressive country, roots rock, singer/songwriters, Americana, bluegrass and more. Including new releases, interviews and gig guide.</span></p>

However since the font sizes aren't uniform, so we'd like to override the type size of the widget to always be the same.

The textStyle doesn't appear to effect the font size, so I'm trying something such as:

return HtmlWidget(
  snapshot.data.description ?? "",
  customStylesBuilder: (e) {
    // Override font size?
    if (e.attributes.containsKey('style')) {
      return ['style', 'font-size:18px'];
    }
    return null;
  },
  textStyle: TextStyle(
      fontFamily: "GTWalsheimPro", fontSize: 16.0),
);

Is this the right idea? do I need to use a WidgetFactory?

https://github.com/daohoangson/flutter_widget_from_html/issues/11#issuecomment-469594432

[daohoangson]

Your return statement should be

return ['font-size', '18px'];

Other than that, it should work.

[markst]

thanks @daohoangson. unfortunately that doesn't make a difference

[daohoangson]

Ah, my bad. Yeah, it didn't work because customStylesBuilder ran too early and the font size is overwritten later by the inline styling. You will need a custom WidgetFactory, something like this:

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: Text('Issue 262')),
        body: SingleChildScrollView(
          child: HtmlWidget(
            kHtml,
            factoryBuilder: () => _WidgetFactory(),
          ),
        ),
      );
}

class _WidgetFactory extends WidgetFactory {
  @override
  void parseStyle(NodeMetadata meta, String key, String value) {
    if (key == 'font-size') return;

    super.parseStyle(meta, key, value);
  }
}

const kHtml = """
<p><span style=\"font-family:tahoma,verdana,arial,helvetica,bitstream vera sans,sans-serif; font-size:12px\">Progressive country, roots rock, singer/songwriters, Americana, bluegrass and more. Including new releases, interviews and gig guide.</span></p>
""";

[markst]

Thanks @daohoangson, this solved it for me!

Ended up with something like this:

@override
void parseStyle(NodeMetadata meta, String key, String value) {
  switch (key) {
    case "font-size":
      return super.parseStyle(meta, key, "18px");
    case "font-family":
      return super.parseStyle(meta, key, "GTWalsheimPro");
    default:
      super.parseStyle(meta, key, value);
  }

[anisalibegic]

@daohoangson How to do the same with the new version when there is String key parameter in the parseStyle method?

[daohoangson]

@anisalibegic you probably asked about version >0.6.0 when the parseStyle method removed the key param? This should work:

  @override
  void parseStyle(BuildMetadata meta, css.Declaration style) {
    switch (style.property) {
      case 'font-size':
      case 'font-family':
        // ignore all inline style font-size and family
        return;
    }

    super.parseStyle(meta, style);
  }

[anisalibegic]

@anisalibegic you probably asked about version >0.6.0 when the parseStyle method removed the key param? This should work:

  @override
  void parseStyle(BuildMetadata meta, css.Declaration style) {
    switch (style.property) {
      case 'font-size':
      case 'font-family':
        // ignore all inline style font-size and family
        return;
    }

    super.parseStyle(meta, style);
  }

Hmm... how do you provide a custom value in that case?

@override
void parseStyle(NodeMetadata meta, String key, String value) {
  switch (key) {
    case "font-size":
      return super.parseStyle(meta, key, "18px");
    case "font-family":
      return super.parseStyle(meta, key, "GTWalsheimPro");
    default:
      super.parseStyle(meta, key, value);
  }

Old approach would just pass the new value but how to do it now?

[daohoangson]

What is your use case @anisalibegic?

If you want to keep the default font for the entire HTML document, the above sample should work.

If you want to specific a specific font, use the above sample and pass in a textStyle when you create the HtmlWidget.

If you want to "redirect" font: keep default font X and use font Y2 if the inline font is Y1 then you can use customStylesBuilder.