Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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,
    );
  }
}
like image 497
Abdullah Al Nahid Avatar asked Nov 16 '18 23:11

Abdullah Al Nahid


People also ask

How do I disable scrolling in WebView flutter?

If this was pure android, all I would do is: webView. setVerticalScrollBarEnabled(false);

How do I stop WebView from scrolling?

If you subclass Webview, you can simply override onTouchEvent to filter out the move-events that trigger scrolling. public class SubWebView extends WebView { @Override public boolean onTouchEvent (MotionEvent ev) { if(ev. getAction() == MotionEvent. ACTION_MOVE) { postInvalidate(); return true; } return super.

How do I stop horizontal scrolling in web design?

You can also set the overflow-x CSS property to hidden, which prevents child content from wrapping within its container but turns off sideways scrolling. Another solution is to set the width of child elements to 100%.

How do I get rid of the scrollbar in flutter?

How do I get rid of the scroll bar in flutter? The easiest and quickest way to achieve this is to set thickness: 0 on the Scrollbar widget.


1 Answers

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.

like image 124
kosiara - Bartosz Kosarzycki Avatar answered Oct 17 '22 21:10

kosiara - Bartosz Kosarzycki