how to achieve Flutter WebView Scale to Fit

user_9131487 0
Viewed 4808

I want to achieve something like this in flutter webview. enter image description here

but getting something like this. enter image description here

how Can I achieve that first image kind of webview which will scale down the page.

dart flutter
3 Answers

You will have to set useWidePortView to true.

Widget build(BuildContext context) {
   return WebviewScaffold(
   initialChild: Loading(),
   appBar: AppBar(
     title: Text(title),
   ),
   url: url,
   withZoom: true,
   scrollBar: true,
   withJavascript: true,
   useWideViewPort: true,
 );
}
user_108969720

your second image is zoom of real image of webview. to zoom webview page you can write following code.

routes: {
"/webview": (_) => WebviewScaffold(
url: url,
appBar: AppBar(
title: Text("Webview"),
),
withJavascript: true,
withLocalStorage: true,
withZoom: true,
)
}
user_84554940

I know it late but maybe it useful for otherS. I able to achieve it by making the withWideViewPort and withOverviewMode true as below

WebviewScaffold(
userAgent: 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) ' + 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94Mobile Safari/537.36',
      withJavascript: true,
      clearCache: true,
      clearCookies: true,
      withZoom: true,
      scrollBar: true,
      useWideViewPort: true,
      url: widget.data.url,
      withOverviewMode: true,`
)
user_61850890
Related