While trying to add a third party js library inside a Flutter web application, I'm facing an issue with clientHeight and clientWidth properties:
I've added a DivElement inside my widget tree with:
@override
void initState() {
super.initState();
divElement = DivElement()
..id = 'viewer_div'
..style.width = '100vh'
..style.height = '100vh'
..style.border = '1px solid green';
// ignore: UNDEFINED_PREFIXED_NAME
ui.platformViewRegistry.registerViewFactory(
'viewer', (int viewId) => dicomElement);
}
@override
Widget build(BuildContext context) {
return Container(
width: 512, height: 512,
color: Colors.transparent,
child: const HtmlElementView(viewType: 'viewer'),
);
}
The divElement is used by the third party js library which adds a canvas DOM element as a child of the div. But the third party library also set the size the canvas according to the divElement clientWidth and clientHeight AND these values always return 0 so the final canvas width and height are set to 0!
I've tried to call the javascript method, which adds the canvas, after the first frame has been rendered but it does not change anything.