Disable horizontal scrolling in flutter webview
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.
Comments
-
Abdullah Al Nahid over 1 year
I'm using this flutter
WebView
plugin https://pub.dartlang.org/packages/flutter_webview_pluginThe 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 disabledThe 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, ); } }