Flutter auto resize webview based on its content

auto_resize_webview.dart

import 'dart:convert';

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Code Sample',
      builder: (BuildContext context, Widget navigator) {
        return MyStatelessWidget();
      },
    );
  }
}

class MyStatelessWidget extends StatefulWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  _MyStatelessWidgetState createState() => _MyStatelessWidgetState();
}

class _MyStatelessWidgetState extends State<MyStatelessWidget> {
  List<WebViewController> _listController = List();

  List<double> _heights =
      List<double>.generate(htmlStrings.length, (int index) => 20.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        shrinkWrap: true,
        itemCount: htmlStrings.length,
        itemBuilder: (context, index) {
          return Container(
            height: _heights[index] ?? 100.0,
            child: WebView(
              initialUrl:
                  'data:text/html;base64,${base64Encode(const Utf8Encoder().convert(htmlStrings[index]))}',
              onPageFinished: (some) async {
                double height = double.parse(await _listController[index]
                    .evaluateJavascript(
                        "document.documentElement.scrollHeight;"));
                setState(() {
                  _heights[index] = height;
                });
              },
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (controller) async {
                _listController.add(controller);
              },
            ),
          );
        },
      ),
    );
  }
}

final List<String> htmlStrings = [
  '''<p>Table shows some compounds and the name of their manufacturing process</p>
<table style="border-collapse: collapse; width: 100%; height: 85px;" border="1">
<tbody>
<tr style="height: 17px;">
<td style="width: 50%; text-align: center; height: 17px;">Compounds/Elements</td>
<td style="width: 50%; text-align: center; height: 17px;">Manufacture process</td>
</tr>
<tr style="height: 17px;">
<td style="width: 50%; height: 17px;">Nitric acid</td>
<td style="width: 50%; height: 17px;">Ostwald's process</td>
</tr>
<tr style="height: 17px;">
<td style="width: 50%; height: 17px;">Ammonia</td>
<td style="width: 50%; height: 17px;">Haber's process</td>
</tr>
<tr style="height: 17px;">
<td style="width: 50%; height: 17px;">Sulphuric acid</td>
<td style="width: 50%; height: 17px;">Contact process</td>
</tr>
<tr style="height: 17px;">
<td style="width: 50%; height: 17px;">Sodium</td>
<td style="width: 50%; height: 17px;">Down's process</td>
</tr>
</tbody>
</table>''',
  '''<p>\(L=[M{L }^{2 }{T }^{-2 }{A }^{-2 }]\)</p>
<p>\(C=[{M }^{-1 }{L }^{-2 }{T }^{4 }{A }^{2 }]\)</p>
<p>\(R=[M{L }^{2 }{T }^{-3 }{A }^{-2 }]\)</p>
<p>\(\therefore \frac {R}{L}=\frac{[M{L }^{2 }{T }^{-2 }{A }^{-2 }]}{[M{L }^{2 }{T }^{-3 }{A }^{-2 }]}=[T]\)</p>''',
  '''<p>Displacement(s)\(=\left(13.8\pm0.2\right)m\)</p>
<p>Time(t)\(=\left(4.0\pm0.3\right)s\)</p>
<p>Velocity(v)\(=\frac{13.8}{4.0}=3.45m{s}^{-1}\)</p>
<p>\(\frac{\delta v}{v}=\pm\left(\frac{\delta s}{s}+\frac{\delta t}{t}\right)=\pm\left(\frac{0.2}{13.8}+\frac{0.3}{4.0}\right)=\pm0.0895\)</p>
<p>\(\delta v =\pm0.0895*3.45=\pm0.3\)(rounding off to one place of decimal)</p>
<p>\(v=\left(3.45\pm0.3\right)m{s}^{-1}\)</p>''',
  '''<p>The only real numbers satisfying \(x^2=4\) are 2 and -2. But none of them satisfy the final condition, \(x+2=3\). So, there is no real number such that these conditions are met. Hence this is null set.</p>
<p>Note that, for \(x\) to be a memner of \(\{x:p(x),q(x)\}\),&nbsp;<em><strong>both</strong></em> \(p(x)\) and \(q(x)\) should be true.</p>''',
];

Genius!

I get an error if the page exceeds a certain height.

Creating a virtual display of size: [1080, 14000] may result in problems(flutter/flutter#2897 is larger than the device screen size: [1080, 2016]. @ponnamkarthik Can you help ?

@bilaloz I get that too, but it's more of a warning.

Not working.

how to do this with url. i don't have htmlString

how to do this with url. i don't have htmlString

It's work also if you have url!

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

class WebViewGuide extends StatefulWidget {
  final String guideUrl;

  WebViewGuide({this.guideUrl});

  @override
  _WebViewGuideState createState() => new _WebViewGuideState();
}

class _WebViewGuideState extends State<WebViewGuide> {
  double webViewHeight;
  String guideUrl;
  WebViewController _webViewController;

  @override
  void initState() {
    super.initState();
    guideUrl = widget.guideUrl;
  }

  @override
  void dispose() {
    _webViewController = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: webViewHeight != null ? webViewHeight : 300,
      child: WebView(
        javascriptMode: JavascriptMode.unrestricted,
        initialUrl: guideUrl,
        onWebViewCreated: (WebViewController webViewController) {
          _webViewController = webViewController;
        },
        onPageFinished: (some) async {
          if (_webViewController != null) {
            webViewHeight = double.tryParse(
              await _webViewController
                  .evaluateJavascript("document.documentElement.scrollHeight;"),
            );
            setState(() {});
          }
        },
      ),
    );
  }
}

Hello this crash my huawei p30 pro each time the window heigh exceed 2500px. When I add an height on the controller like so
Controller(height: webViewHeight != null ? webViewHeight : 300) InAppWebView or webview_flutter increase it's virtual height

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

when the virtual size reach 8000 boom !!!!!

您好，每次窗户高度超过2500px时，我的华为p30 pro都会崩溃。当我像这样在控制器上添加高度时，
Controller（height：webViewHeight！= null？webViewHeight：300）InAppWebView或webview_flutter增加了它的虚拟高度

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

当虚拟大小达到8000繁荣！

这个问题解决了吗？

same here, iOs seems to handle this with no issues. Android both: physical device and Emulator crash when certain limit is hit. Has anyone found a working solution for that, please?

Fix crash on Android device

if (Platform.isAndroid) {
      WebView.platform = SurfaceAndroidWebView();
}

Not working.

thank you it worked

.

same here, Has anyone found a working solution for that, please?

How to do that with webview_flutter: 4.x (with the latest version) as many things have changed so far.