Search code examples
webviewflutterhorizontal-scrolling

Disable horizontal scrolling in flutter webview


I'm using this flutter WebView plugin https://pub.dartlang.org/packages/flutter_webview_plugin

The app is running perfectly. However, when the webpage loads, there is a horizontal scrolling bar in some websites and if I scroll horizontally those are only white empty spaces in the website. I want to disable this horizontal scrolling feature to keep user experience on point.

Horizontal Scrolling in the screenshot
I want the webview look like this with horizontal scrolling disabled

The test code is given below:

webview.dart

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

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
  var urlString = "https://www.prothomalo.com/bangladesh/article/1565521/%E0%A6%B6%E0%A6%A4%E0%A6%AD%E0%A6%BE%E0%A6%97-%E0%A6%B8%E0%A7%81%E0%A6%B7%E0%A7%8D%E0%A6%A0%E0%A7%81-%E0%A6%A8%E0%A6%BF%E0%A6%B0%E0%A7%8D%E0%A6%AC%E0%A6%BE%E0%A6%9A%E0%A6%A8-%E0%A6%B9%E0%A6%AC%E0%A7%87-%E0%A6%A8%E0%A6%BE-%E0%A6%95%E0%A6%AC%E0%A6%BF%E0%A6%A4%E0%A6%BE-%E0%A6%96%E0%A6%BE%E0%A6%A8%E0%A6%AE";

  @override
  void initState() {
    super.initState();
    flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {
      print(wvs.type);
    });
  }

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      appBar: AppBar(
        title: new Text(
          'WebView Test',
          style: new TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      url: urlString,
      withZoom: false,
    );
  }
}

Solution

  • In my case it was enough to wrap the WebView in a GestureDetector widget and override onHorizontalDragUpdate() callback.

    WebViewController _webViewController;
    
    GestureDetector(
        onHorizontalDragUpdate: (updateDetails) {},
        child: WebView(
          initialUrl: 'about:blank',
          onWebViewCreated: (WebViewController webViewController) {
            _webViewControllerHeader = webViewController;
          },
        ),
    )
    

    To disable vertical scrolling in flutter webview you can override onVertivalDragUpdate() correspondingly.

    Look for more info here and here.