'Flutter: How to fit the web view size to screen?

I am new in flutter,

tried to use web view in flutter, but the the size of the web view is bigger than the screen.

I want to fit the web page size to the phone screen size.

How I can do that?

Here is what I get now:

I want to see:

Here is my code:

import 'package:flutter/material.dart';

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class CoursesInformation extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<CoursesInformation> {
  TextEditingController controller = TextEditingController();
  FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
  var urlString = "https://shoham.biu.ac.il/BiuCoursesViewer/MainPage.aspx";

  launchUrl() {
    setState(() {
      urlString = controller.text;
     flutterWebviewPlugin.reloadUrl(urlString);
       flutterWebviewPlugin.launch(urlString,
              rect: new Rect.fromLTWH(
                  0.0, 
                  0.0, 
                  MediaQuery.of(context).size.width, 
                  300.0));
    });
  }

  @override
  void initState() {
    super.initState();

    flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {
      print(wvs.type);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
    textDirection: TextDirection.rtl,
    child: WebviewScaffold(
      appBar: AppBar(
        title: Text('מידע על קורסים'),
        centerTitle: true
      ),
      url: urlString,
      withZoom: true,
      scrollBar: true,
      withJavascript: true,
      useWideViewPort: true,

      withLocalStorage: true,
        ));
  }
}

Solution 1:^[1]

You can try my plugin flutter_inappwebview, which is a Flutter plugin that allows you to add inline WebViews or open an in-app browser window and has a lot of events, methods, and options to control WebViews.

In your case, you can enable the DESKTOP mode (as it happens on normal browsers like Chrome, etc.) through the option preferredContentMode: UserPreferredContentMode.DESKTOP

Here is an example with your URL:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  InAppWebViewController webView;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Container(
            child: Column(children: <Widget>[
          Expanded(
              child: InAppWebView(
            initialUrl:
                "https://shoham.biu.ac.il/BiuCoursesViewer/MainPage.aspx",
            initialHeaders: {},
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                  debuggingEnabled: true,
                  preferredContentMode: UserPreferredContentMode.DESKTOP),
            ),
            onWebViewCreated: (InAppWebViewController controller) {
              webView = controller;
            },
            onLoadStart: (InAppWebViewController controller, String url) {

            },
            onLoadStop: (InAppWebViewController controller, String url) async {

            },
          ))
        ])),
      ),
    );
  }
}

Here is the Screenshot:

Solution 2:^[2]

Remove

useWideViewPort: true,

Read more documentation at https://pub.dev/documentation/flutter_webview_plugin/latest/

It now looks like

Solution 3:^[3]

I used InAppWebView and it works for me. This will add a line like this to your package's pubspec.yaml`:

dependencies:
  flutter_inappwebview: ^5.3.2

For example:

return InAppWebView(
      initialOptions: InAppWebViewGroupOptions(
          android: AndroidInAppWebViewOptions(
              useHybridComposition: true,
              textZoom: 100 * 2 // it makes 2 times bigger
          )
      ),
      onWebViewCreated: (InAppWebViewController controller) {
        webViewController = controller;
      },
    );

If you want to make it smaller, you just need to divide it as below:

textZoom: 100 / 2 // it makes 2 times smaller

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Lorenzo Pichilli
Solution 2
Solution 3	Fakhriddin Abdullaev

'Flutter: How to fit the web view size to screen?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]