Hi everyone,
I'm working on a FlutterFlow app that uses a WebView widget to display HTML content. My goal is to dynamically determine the height of the provided HTML content and then adjust the WebView's container size accordingly, so it works properly on mobile devices (both Android and iOS).
Has anyone successfully implemented a solution like this or can offer any guidance or sample code? Any help or pointers would be greatly appreciated.
Thanks in advance!
I followed the approach from this https://community.flutterflow.io/ask-the-community/post/dynamic-webview-height-sDXL6NpzqOXlIbc and implemented the following code:
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'dart:async';
import 'dart:html' as html;
Future<double> calculateWebViewHeight(String bodyContent) async {
final completer = Completer<double>();
final div = html.DivElement();
div.style.visibility = 'hidden';
div.style.position = 'absolute';
div.style.width = '100%';
div.setInnerHtml(bodyContent, validator: html.NodeValidatorBuilder.common());
html.document.body?.append(div);
Future.delayed(Duration(milliseconds: 50), () {
final height = div.offsetHeight.toDouble();
completer.complete(height);
div.remove();
});
return completer.future;
}
This solution calculates the height of the HTML content by creating an invisible div and reading its offsetHeight. It works perfectly on the web, but unfortunately, it doesn't work on mobile devices.
