Flutter InAppWebView inside SingleChildScrollView

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

您应该尝试 flutter_html 而不是 web 视图

Answer 3

我认为您应该实现自定义大小或仅将其限制为 webview 容器的预期行为并使其具有响应性，以便屏幕不会在旧设备中出现任何崩溃或类似情况。