Revision history [back]

To achieve zooming similar to desktop in an HTML webview browser using Flutter, you can use the WebView widget provided by the webview_flutter package. This widget has several properties that can be used to control the zoom level of the webpage.

1. First, you can set the initial scale property of the WebView widget to a desired value. This property controls the initial zoom level of the webpage.

2. You can also set the user agent string property of the WebView widget to a string that includes the desired viewport meta tag. This tag tells the webpage to use a specific viewport size and can help control the zoom level.

3. Finally, you can use the gesturesEnabled property of the WebView widget to enable or disable pinch-to-zoom functionality. By default, this is enabled, but if you want to disable zooming altogether, you can set this property to false.

Here is an example of how to use these properties to achieve desktop-like zooming in a WebView widget:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatefulWidget {
  final String url;

  const MyWebView({Key key, this.url}) : super(key: key);

  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  final double _initScale = 1.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: widget.url,
          initialScale: _initScale,
          userAgent:
              'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299',
          gestureNavigationEnabled: true,
        ),
      ),
    );
  }
}

In this example, we set the initial scale to 1.0 and include a user agent string that tells the webpage to use a viewport width of 1920 pixels (the width of a typical desktop screen). We also enable gesture navigation so users can use pinch-to-zoom if desired.

Note: Changing the initial scale can cause some webpages to appear blurry or distorted. You may need to experiment with different values to find the optimal zoom level for your use case.