Flutter WebView within ListView or CustomScrollView - Crashes on Android for large heights

问题

Currently we've got a problem with the Flutter WebView within a ScrollView. We would like to display a WebView with article content written in HTML below an Image and other content like the title or buttons. It shouldn't be possible to just scroll the WebView. Instead, the entire content should be scrolled together.

The problem is, that the WebView should scroll together with the header. Therefore the WebView needs a fixed height as far as I know. Via Javascript it's possible to get the scroll height of the WebView. This is great working on iOS, but on Android the App is crashing when the height of the WebView is too large. The reason for this seems to be that under Android the height of the WebView may only be as large as the screen. Otherwise there is a warning message:

Creating a virtual display of size: [1080, 11303] may result in problems(https://github.com/flutter/flutter/issues/2897).It is larger than the device screen size: [1080, 1794].

Is there a better possibility to use a WebView inside a ListView? We also tried flutter_html, but on some articles we also need JavaScript and this is not supported. On large pages it's also a bit laggy.

This is an example App of the current problem. It works for small pages, but not for large ones. The height when it crashes depends on the device. You could for example set the height manually to a value like 13000:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MaterialApp(home: CrashingWebViewExample()));

class CrashingWebViewExample extends StatefulWidget {
  @override
  _CrashingWebViewExampleState createState() => _CrashingWebViewExampleState();
}

class _CrashingWebViewExampleState extends State<CrashingWebViewExample> {
  WebViewController _webViewController;
  double _webViewHeight = 1;

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Container(height: 100, color: Colors.green),
          Container(
            height: _webViewHeight,
            child: WebView(
              initialUrl: 'https://en.wikipedia.org/wiki/Cephalopod_size',
              javascriptMode: JavascriptMode.unrestricted,
              onPageFinished: (String url) => _onPageFinished(context, url),
              onWebViewCreated: (controller) async {
                _webViewController = controller;
              },
            ),
          ),
          Container(height: 100, color: Colors.yellow),
        ],
      ),
    );
  }

  Future<void> _onPageFinished(BuildContext context, String url) async {
    double newHeight = double.parse(
      await _webViewController.evaluateJavascript("document.documentElement.scrollHeight;"),
    );
    setState(() {
      _webViewHeight = newHeight;
    });
  }
}

The code is also available on GitHub.

There is now also a ticket for this issue in the flutter repository.

来源：https://stackoverflow.com/questions/63225690/flutter-webview-within-listview-or-customscrollview-crashes-on-android-for-lar

标签

android

Flutter

webview

crash