Home > Net >  Reduce a webview in percentage in flutter
Reduce a webview in percentage in flutter

Time:01-04

I've been stuck for a few weeks with a simple webview in flutter, with the InAppWebView package. The point is that it is not responsive at all, and basically I see that it would be solved by reducing by a percentage of 60%, but I can not achieve anything satisfactory for the client. Someone comes up with how I can reduce the content of the webview in percentage without touching anything by the server.

Paste part of the code:

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Demo',
            style: TextStyle(height: 5, fontSize: 10),
          ),
          backgroundColor: Colors.transparent,
          toolbarHeight: 10,
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                  child: Stack(
                      children: [
                        InAppWebView(
                          initialUrlRequest:
                          URLRequest(url: Uri.parse("[SERVER ADDRESS]")),
                          initialOptions: InAppWebViewGroupOptions(
                            crossPlatform: InAppWebViewOptions(
                              preferredContentMode: UserPreferredContentMode.DESKTOP,
                            ),
                          ),
                          onWebViewCreated: (InAppWebViewController controller) {
                            webView = controller;
                          },
                          onl oadStart: ( controler, url) {
                          },
                          onl oadStop: ( controller, url) async {
                          },
                        )
                      ])),
            ])
        ),
      ),
    );
  }

I would appreciate any help. Thank!

CodePudding user response:

Please try this package webview_flutter: ^3.0.0

CodePudding user response:

I have also tried webview_flutter, but I find the same problem, it is not very responsive and I have to reduce it in percentage.

Paste code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white10,
      appBar: AppBar(
        title: const Text('DEMO'),
        actions: <Widget>[
          NavigationControls(_controller.future),
          SampleMenu(_controller.future),
        ],
      ),
      
      body: Builder(builder: (BuildContext context) {
        return WebView(
          initialUrl: '{SERVER ADDRESS}',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
          onProgress: (int progress) {
            print('WebView is loading (progress : $progress%)');
          },
          javascriptChannels: <JavascriptChannel>{
            _toasterJavascriptChannel(context),
          },
          navigationDelegate: (NavigationRequest request) {
            if (request.url.startsWith('{SERVER ADDRESS}')) {
              print('blocking navigation to $request}');
              return NavigationDecision.prevent;
            }
            print('allowing navigation to $request');
            return NavigationDecision.navigate;
          },
          onPageStarted: (String url) {
            print('Page started loading: $url');
          },
          onPageFinished: (String url) {
            print('Page finished loading: $url');
          },
          gestureNavigationEnabled: true,
          backgroundColor: const Color(0x00000000),
        );
      }),
    );
  }

  • Related