property styles

[misterfourtytwo]

would be real nice to add property styles to element in custom styles builder so people won't need to write smth like this every time they need to parse style properties

          final List<String> l = e?.attributes['style']
                  ?.replaceAll(RegExp(r'(\s)+'), '')
                  ?.split(';') ??
              <String>[];

          final Map<String, String> styles = <String, String>{};
          for (final String keyValue
              in l.where((String value) => value?.contains(':') == true)) {
            final List<String> pair =
                keyValue.replaceAll(RegExp(r'([\s]+)'), ' ').split(':');
            styles[pair[0]] = pair[1];
          }

[daohoangson]

Why do you need to parse the styles atttibute in customStylesBuilder? The package automatically parses those and apply to the element by itself already...

[misterfourtytwo]

when i need to apply changes to incoming styles.
i.e. there is a company site, api sends some page parts to render in app, but i need to change some styling

[daohoangson]

Ah I see, it's possible we will make the parsed key-value pairs available during customStylesBuilder for your use case.

[daohoangson]

Version 0.5.2 has been released with support for this. It is now straightforward to get the list of inline styles:

import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';

/// in your `WidgetFactory` or `BuildOp`
for (final style in meta.element.styles) {
  print('${style.key}=${style.value}');
}

Please try upgrading and let me know whether it works for you. Thank you.

[misterfourtytwo]

as far as i understand i cannot use this in the custom styles builder?

[daohoangson]

No problem, you can use it in customStylesBuilder. Something like this:

          HtmlWidget(
            html,
            customStylesBuilder: (element) {
              for (final style in element.styles) {
                if (style.key == 'foo') {
                  return {'foo': 'bar'};
                }
              }

              return null;
            },
          ),

[misterfourtytwo]

so, you can see that my app has last plugin version locked:

and debugger seem not to see this field

[daohoangson]

It is not a field, it is an extension. Does your print() statement work?

[misterfourtytwo]

as i'm saying, nope.
if this is an extension, then i probably must import it separately and this solves the mystery why analyzer doesn't see it.
could u please specify where it is located so i could test with it inluded in file?

[daohoangson]

import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';

That should be enough. If you follow that import, it will export 'src/helpers.dart'; then export 'package:flutter_widget_from_html_core/src/core_helpers.dart';. You should be able to find DomElementExtension there.

[misterfourtytwo]

sorry for the delay, got busy lately.
class extension is certainly there, but my project doesn't seem to connect it, even after explicitly importing extension and specifying element type.

when instead of prefixing type i use hide element on 'package:flutter/foundation.dart', i get following

though, without 'package:html/dom.dart' import analyzer can not find Element type.
my guess is that there is some bug in analyzer/linter, which does not allow to properly import extensions from external package, but inside one everything works properly.
switched and tested on the master flutter branch, instead of stable, got the same behavior.

[daohoangson]

I think I have figured it out.

In the first version of your code, you used customStylesBuilder: (dynamic e) {}. The dynamic type basically disabled the extension method since extension is resolved at compile time. Then you specified Element type but that didn't work because of a name conflict. You have to follow the suggestion to import 'package:html/dom.dart' as dom; then use customStylesBuilder: (dom.Element e) {}.

It's possible to skip the typing completely, using customStylesBuilder: (e) {} is simple and should be enough.

[misterfourtytwo]

nope, using import as dom was the first thing i did.
ill check this on my linux machine and later recheck on mac.
if one does not cast type and specify dynamic, you could still see full object type in debugger and it hadn't imported extension for me.
unfortunately, linter rules of my app do not allow to run without specified arguments types. ill also check this without them to narrow down problem cases.
upd. checked on linux, both your solutions seem to work fine. maybe its an engine or low memory bug on macos when it does not import extension.

[daohoangson]

I have just revisited this with Flutter 2 and it seems to work fine.

import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:html/dom.dart' as dom;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Issue 367'),
      ),
      body: HtmlWidget(
        'Foo',
        customStylesBuilder: (dom.Element element) {
          for (final style in element.styles) {
            if (style.key == 'foo') {
              return {'foo': 'bar'};
            }
          }

          return null;
        },
      ),
    );
  }
}

[misterfourtytwo]

Yeah, on 2.0 seems to be working fine with either of dynamic, dom.Element and simply Element(imported from flutter_widget_from_html, when hidden imports from other packages.)