Is there any possibility to put WebView (webview_flutter) inside a ListView without assigning its dimensions but automatically adopt its height. Only working solution I found is to put WebView in Container by assigning its height but I dont want to assign any height I just want it to occupy height according to its content..
I have tried so many solutions including Expanded for this but getting error about infinite height . Any solution?
Until now you can not as I expect...but you can include a scroll inside your webview widget
import those libraries:
import 'package:flutter/gestures.dart';
import 'package:flutter/foundation.dart';
add this line to your webview widget:
gestureRecognizers: Set()..add(Factory<VerticalDragGestureRecognizer>(()=>VerticalDragGestureRecognizer())),
and you are done :)
EDIT the flutter_widget_from_html plugin is now supporting the webview and iframe and you can use it insted of the web_view plugin and without the need of using a height
I am sorry it's late but now it's working properly.
I wrapped WebView into a SizedBox and assigned it's height like this:
_webViewController
.evaluateJavascript("document.body.clientHeight")
.then((height) {
print("Height of Page is: $height}");
setState(() {
sizedBoxHeight = double.parse(height);
});
});
For a more advanced solution we can use JavascriptChannels like this:
javascriptChannels: Set.from([
JavascriptChannel(
name: 'RenderedWebViewHeight',
onMessageReceived: (JavascriptMessage message) {
setState(() {
sizedBoxHeight = double.parse(message.message);
});
]),
In JavaScript, we can do something like this.
onload="RenderedWebViewHeight.postMessage(document.body.clientHeight);"
Now we can see it's dynamically calculating the height of WebView which is wrapped in a SizedBox with the height WebView so we can put it into a ListView.
For a more detailed solution, you can look at webview_flutter_plus.
Edit:
document.documentElement.scrollHeight
is the most accurate way of doing things. This works with both body margins and margins of stuff inside the body pushing it downwards. More info in How to get height of entire document with JavaScript