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.