Basic Social Media Integration, Flutter Web

Question

I'm trying to implement social media integrations for my flutter application, deploying to both mobile and web. The mobile implementation with the share package is working just fine, but since web is a bit newer, I've decided to just use basic html and js apis for things like like and share buttons, as you would find here for facebook, twitter, and linkedin.

When fed statically as src from html the buttons work fine. If I had some sort of server-side templating at my disposal such as thymeleaf or Django templates I might go that route to create parameterized HtmlElementView widgets (e.g. with template literals for shareable URLs), but instead I'm limited to the dart:html package.

This is fine in theory, but in practice for whatever reason I cannot load the necessary social media js apis like the following in time for the DOM to recognize them and correctly render, whether I prepare them in dart code or stick them in the header or body of the index.html file.

To prepare the payload in dart, I'd do something like this:

static final _FB_API_HEADER1 = DivElement()
    ..id = "fb-root";

  static final _FB_API_HEADER2 =
    ScriptElement()
    ..async = null
    ..defer = null
    ..crossOrigin = "anonymous"
    ..nonce = "plTxQNq6"
    ..src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v10.0";

  static Element _createFacebookHeader() {
    Element _temp = DivElement();
    _temp.append(_FB_API_HEADER1);
    _temp.append(_FB_API_HEADER2);
    return _temp;
  }

  static get FB_API_HEADER => _createFacebookHeader();

static Element createFacebookButton(String linkToLikeAndShare) {
    return DivElement()
      ..appendHtml('<div class="fb-like" data-href="$linkToLikeAndShare" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div>',
          validator: NodeValidatorBuilder()
            ..allowElement('div', attributes: ['data-share','data-size','data-action','data-layout','data-width','data-href'])
            ..allowHtml5(uriPolicy: ItemUrlPolicy())
            ..allowNavigation(ItemUrlPolicy())
            ..allowImages(ItemUrlPolicy()) );
  }

and then push to a view, like this:

DivElement _finalView = DivElement();
_finalView.append(SocialMediaApis.FB_API_HEADER);
_finalView.append(SocialMediaApis.createFacebookButton("mysite.com"));

// ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      'LikeAndShare',
      (int viewId) => _finalView,
    );

and built as a widget, like so:

@override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          SizedBox(
            height: 500,
            width: 500,
            child: HtmlElementView(
              viewType: 'LikeAndShare',
            ),
          )
        ],
      ),
    );
  }
}

Does anyone have an idea how to get past this? Perhaps some preloading mechanism?

For context I'm using Flutter version 1.23.0-18.1.pre for compatibility, and I'm happy to share code where it might help.

Thank you very much for your time.