Question 76659 in Flutter Question posted in
The official Flutter documentation can be found here.

Is it possible to have an initial zoom for WebView – Flutter

I wonder if there was a way to zoom the websites automatically so the user would not have to. If there is, How do I do it? I use the plugin webview_flutter: ^2.0.8 in my pubspec.yaml

I simply wish to be able to display part of a website but not all of it for the user. Is this possible?

This is my current code:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFFCFCFC),
      appBar: AppBar(
        centerTitle: true,
        title: const Text('AMIHAN',
          style: TextStyle(
            fontSize: 28.0,
            fontWeight: FontWeight.bold,
            letterSpacing: 2.5,
          ),
        ),
      ),
      body: Center(
        child: Container(
        color: Colors.grey,
          width: MediaQuery.of(context).size.width,
            child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const SizedBox(height: 20,),
              Container(
                height: 200,
                width: 200,
                color: Colors.blue,
                child: WebView(
                  initialUrl: 'my 1st url',
                  javascriptMode: JavascriptMode.unrestricted,
                ),
              ),
              const SizedBox(height: 20),
              Container(
                height: 200,
                width: 200,
                color: Colors.blue,
                child: WebView(
                  initialUrl: 'my 2nd url',
                  javascriptMode: JavascriptMode.unrestricted,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This is my current output The website contents are far too small and unreadable. I have made the background grey to see the webview easier.

Two webviews are displayed each with one graph

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I think I may have found a solution although may not have been the most efficient. I simply made a custom web view where the HTML code is displaying the website. it was much easier to customize it that way.


  2. 0

    If you are using the webview_flutter plugin, you can use the initialScale parameter to set the initial zoom level for the web view.

    for example initial zoom level to 150%:

    This will automatically zoom the website to 150% of its original size when it loads in the web view. You can adjust the initialScale value as per your need .

    If you want to display only part of the website, you can use the javascriptMode parameter to disable JavaScript in the web view and the userAgent parameter to specify a custom user agent string. This will prevent the website from running any scripts or expanding to fill the full screen.

    WebView(
    initialScale: 150,
    initialUrl: "https://www.example.com&quot;,
    javascriptMode: JavascriptMode.unrestricted,
    userAgent: "The Part you want to restrict",
    )

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search