Flutter InAppWebView inside SingleChildScrollView - flutter

Question

I have a request to make a card containing a web view followed by more widgets. The view should look something like this.
I have made implementation like this:
SingleChildScrollView(
...
child: Column(
children: [
Container(
...
child: Column(
children: [
SizedBox(
height: _webviewHeightSetInOnLoadStop
child: InAppWebview(
...
)
),
...
)
),
Widget1(),
Widget2(),
Widget3(),
]
Where the _webviewHeightSetInOnLoadStop is set like this:
onLoadStop: (controller, url) async {
final height = await controller.evaluateJavascript(
source: "document.documentElement.scrollHeight;",
);
...
setState(() {
_webviewHeightSetInOnLoadStop = height;
...
});
}
The problem with this implementation is that when the webview is too large the Android crashes with:
IllegalStateException: Unable to create a layer for InAppWebView, size 960x39192 exceeds max size 16384
in my understanding, this is thrown due to the height of the webview, which is system restricted.
So I desire a behavior in which webview is scrollable, its container has a fixed height that is a little bit bigger than the screen (when needed) and when the end of the scroll of the webview is reached in either direction the drag event is passed to the SingleChildScrollView.

Answer 1

There is another plugin which can do what you are looking for exactly
webview_flutter_plus: ^0.2.3
Try this code
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter_plus/webview_flutter_plus.dart';
class ImageEditor extends StatefulWidget {
const ImageEditor({Key? key}) : super(key: key);
#override
_ImageEditorState createState() => _ImageEditorState();
}
class _ImageEditorState extends State<ImageEditor> {
WebViewPlusController? _controller;
double _height = 1;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height:MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: _height,
child: WebViewPlus(
onWebViewCreated: (controller) {
this._controller = controller; controller.loadUrl('https://pub.dev/packages/webview_flutter_plus');
},
onPageFinished: (url) {
_controller!.getHeight().then((double height) {
print("Height: " + height.toString());
setState(() {
_height = height;
});
});
},
javascriptMode: JavascriptMode.unrestricted,
),
),
Container(
height:200,
width: MediaQuery.of(context).size.width,
color: Colors.red,
),
Container(
height:200,
width: MediaQuery.of(context).size.width,
color: Colors.black,
),
Container(
height:200,
width: MediaQuery.of(context).size.width,
color: Colors.green,
),
],
),
),
),
);
}
}

Answer 2

You should try flutter_html instead web view

Answer 3

i think you should implement a custom size or just limiting it for the intended behaviour for the container of your webview and make that responsive so the screen doesn't get any crashes or like that in older devices.