Disable horizontal scrolling in flutter webview

3,737

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.

Share:
3,737
Abdullah Al Nahid
Author by

Abdullah Al Nahid

coding biological tools and databases

Updated on December 07, 2022

Comments

  • Abdullah Al Nahid
    Abdullah Al Nahid over 1 year

    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,
        );
      }
    }