expandable_webview.dart

import 'dart:math' show max;

import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:webview_flutter/webview_flutter.dart';

class ExpandableWebView extends StatefulWidget {
  final String url;
  final EdgeInsets padding;

  ExpandableWebView(
    this.url, {
    Key key,
    this.padding = const EdgeInsets.all(0),
  }) : super(key: key);

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

class _ExpandableWebViewState extends State<ExpandableWebView> {
  double contentHeight = 0;
  bool loaded = false;

  @override
  Widget build(BuildContext context) {
    print('[webView/build] url: ${widget.url}');

    return Container(
        padding: widget.padding,
        width: double.infinity,
        height: max(MediaQuery.of(context).size.height, contentHeight),
        child: Stack(
          alignment: Alignment.topCenter,
          children: [
            _buildWebView(context),
            if (!loaded)
              InfiniteProgressIndicator(
                padding: EdgeInsets.symmetric(
                  vertical: 16.0,
                ),
              )
          ],
        ));
  }

  Widget _buildWebView(BuildContext context) {
    return WebView(
      initialUrl: widget.url,
      javascriptMode: JavascriptMode.unrestricted,
      javascriptChannels: Set.from([
        JavascriptChannel(
          name: 'extents',
          onMessageReceived: (JavascriptMessage message) {
            print('[webView/javascriptChannels] ${message.message}');
            setState(() {
              contentHeight = double.parse(message.message);
            });
          },
        )
      ]),
      onPageFinished: (String url) {
        print('[webView/onPageFinished] finished loading "$url"');
        setState(() {
          loaded = true;
        });
      },
      onWebViewCreated: (WebViewController ctrl) {
        print('[webView/onWebViewCreated] created');
      },
    );
  }
}

javascript_channel.js

<script type="text/javascript">window.extents.postMessage(document.body.offsetHeight);</script>

progress_indicator.dart

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class InfiniteProgressIndicator extends StatelessWidget {
  final EdgeInsets padding;

  const InfiniteProgressIndicator({
    Key key,
    this.padding = const EdgeInsets.all(0),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: padding,
      child: Platform.isAndroid
          ? CircularProgressIndicator(
              value: null,
              valueColor:
                  AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
              strokeWidth: 2.0,
            )
          : CupertinoActivityIndicator(
              radius: 20.0,
            ),
    );
  }
}

App is still crashing on Android when setting the height to a high value.

Testing on iOS Simulator, the javascript channel section never runs and the contentHeight is never set :(

Ok I was being dense - I hadn't actually injected the JS into the incoming HTML :)