CODEWITHSUNDEEP
flutterdartwebview
einav
einav

Reputation: 165

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:

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,
        ));
  }
}

Upvotes: 3

Views: 22049

Answers (3)

Fakhriddin Abdullaev
Fakhriddin Abdullaev

Reputation: 4910

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

Upvotes: 1

Lorenzo Pichilli
Lorenzo Pichilli

Reputation: 3429

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

Upvotes: 7

Dev
Dev

Reputation: 6776

Remove

useWideViewPort: true,

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

It now looks like

enter image description here

Upvotes: 0

Related Questions