Why can't I scroll custom WebView in Flutter ModalBottomSheet

Question

Hey guys anyone know why I can't scroll vertically the WebView in my ModalBottomSheet? This is my code, please let me know if anything wrong or give me some advice.

showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (context) => Container(
        height: MediaQuery.of(context).size.height * 0.75,
        decoration: new BoxDecoration(
          color: Colors.white,
          borderRadius: new BorderRadius.only(
            topLeft: const Radius.circular(25.0),
            topRight: const Radius.circular(25.0),
          ),
        ),
        child: Padding(
          padding: EdgeInsets.fromLTRB(0, 23, 0, 0),
          child: WebView(
              initialUrl: 'https://www.sicepat.com/checkAwb/',
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (controller) {
                _myController = controller;
              },
          onPageFinished: (initialUrl) {
            _myController.evaluateJavascript("document.getElementsByClassName('ws-header-container')[0].style.display='none';");
            _myController.evaluateJavascript("document.getElementsByClassName('ws-footer-page')[0].style.display='none';");
          },
        )
        ),
      ),
    ); 

Calore

is this the WebView widget: pub.dev/documentation/webview_flutter/latest/webview_flutter/…? is it supposed to be scrollable? at least i cant find a place for a scrollController. do you get an error? – Forcemeat

Improve readability & add tag – Instep

Answer 1

Try to use gestureRecognizers and set the WebView key

Old Version:

final Set<Factory> gestureRecognizers = [Factory(() => EagerGestureRecognizer())].toSet();

UniqueKey _key = UniqueKey();

...

New Version:

final Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers = {
  Factory(() => EagerGestureRecognizer())
};

UniqueKey _key = UniqueKey();

WebView(
  key: _key, // <= Add UniqueKey here.
  initialUrl: 'https://www.sicepat.com/checkAwb/',
  javascriptMode: JavascriptMode.unrestricted,
  gestureRecognizers: gestureRecognizers, // <= Add gestureRecognizers here.
  onWebViewCreated: (controller) {
   _myController = controller;
  },
  onPageFinished: (initialUrl) {
   _myController.evaluateJavascript("document.getElementsByClassName('ws-header-container')[0].style.display='none';");
   _myController.evaluateJavascript("document.getElementsByClassName('ws-footer-page')[0].style.display='none';");
  },
)

Curiel

Ah, sorry. I forgot to tell you to import 'package:flutter/foundation.dart'; and import 'package:flutter/gestures.dart'; – Curiel

that's work thank you.... and is this any option to hide the scrollbar? – Calore

it's ok. Hmm.. I've no idea about that – Curiel

final Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers = { Factory(() => EagerGestureRecognizer()) }; – Dukes

thankyou only added gestureRecognizers: gestureRecognizers, its work properly. – Schug

WebView: which package in pub.dev? – Guadalupeguadeloupe

Answer 2

For Newer Version of Flutter;

  final Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers = {
    Factory(() => EagerGestureRecognizer())
  }; 

Dukes

This also works for scrolling WebViewWidget inside a ListView -- don't forget to import package:flutter/foundation.dart and package:flutter/gestures.dart – Vendetta