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,
);
}
}
If this was pure android, all I would do is: webView. setVerticalScrollBarEnabled(false);
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.
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 scroll bar in flutter? The easiest and quickest way to achieve this is to set thickness: 0 on the Scrollbar widget.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With