How to resize HtmlElementView when the content size changes

Viewed 135

I got recaptcha v2 working on flutter web but the issue is that I have to specify the initial height of the SizedBox that holds the HtmlElementView as follows

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

class GoogleCaptchaView {
  static registerViewFactory(String viewId, dynamic cb) {
    // ignore:undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(viewId, cb);
  }
}

class GCaptchaPlugin extends StatefulWidget {
  const GCaptchaPlugin({Key? key}) : super(key: key);

  @override
  _GCaptchaPluginState createState() => _GCaptchaPluginState();
}

class _GCaptchaPluginState extends State<GCaptchaPlugin> {
  String createdViewId = 'column';

  @override
  void initState() {
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
        createdViewId,
            (int viewId) => html.IFrameElement()
          ..style.height = double.maxFinite.toString()
          ..style.width = double.maxFinite.toString()
          ..src = "/assets/html/recaptcha.html"
          ..style.border = 'none');

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: SizedBox(
            height: 120.0,
            child: HtmlElementView (
              viewType: createdViewId,
            ),
          ),
        ),
      ],
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
    );
  }
}

the issue is I cannot find any documentation on how to resize the SizedBox to match the new size when the image picker shows up in reCaptcha V2 so I am stuck with something looking like this reCaptcha not Resizing

0 Answers
Related