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

user_13143450 0
Viewed 12708

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:

enter image description here

I want to see:

enter image description here

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,
        ));
  }
}
dart flutter webview
3 Answers

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:

enter image description here

user_46376380

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
user_69307190
user_18349410
Related