I am currently working on a Flutter project that renders article data from an API in an article screen inside my app. Inside the content from the API, tweets are embedded. I've created the code for the tweets to be rendered properly by using the Flutter Webview view and this HTML code (from the official Twitter Docs):
String getHtmlString(String tweetId) {
return '''
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
window.onload = function() {
twttr.widgets.createTweet(
'$tweetId',
document.getElementById('container')
);
};
</script>
</body>
</html>
''';
}
The WebView is then utilised in the code like this, in order for the tweets to be rendered when embedded in the article content:
final tweetIdRegex = RegExp(r'https://twitter.com/.+?/status/(\d+)');
final match = tweetIdRegex.firstMatch(element.innerHtml);
final extractedId = match?.group(1);
if (extractedId != null) {
parsedWidgets.add(
SizedBox(
height: 700,
child: WebView(
initialUrl: Uri.dataFromString(
getHtmlString(extractedId),
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8'),
).toString(),
javascriptMode: JavascriptMode.unrestricted,
),
),
);
}
As seen in this code, the height of the tweet is fixed in the SizedBox (to 700). However, I want the height of the WebView to be unlimited as no tweet have the same height. The problem is that this isn't possible as the rendering method is created inside a SingleChildScrollView and the WebView exceeds it's limit.
Please note that I am using the webview_flutter: ^3.0.0 version, as the newest version (4.2.2) did not work when following this guide:
