How to fix white screen in webview_flutter?

Question

Run webview_flutter example app(https://github.com/flutter/plugins/tree/master/packages/webview_flutter/example) with inital_url: "https://kreatryx.com" On Android it just shows white screen with Zopim chat bar on the bottom right. On iOS it runs fine. Any solution for android?

What I've already tried: 1. Flutter channel dev 2. Flutter channel master

Answer 1

Thanks to the github Issues reference in this post, the following solution worked for me to edit Info.plist:

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key> <true/>
  <key>NSAllowsArbitraryLoadsInWebContent</key> <true/>
</dict>

I am new to working with Info.plist, and wasn't sure if the <dict> tags could be nested like that, but apparently it's ok.

Answer 2

Incase the url you use is not all in English or has some spacial character. You need to encode the url like this

 WebView(
      initialUrl: Uri.encodeFull(yourUrl),
      ...
 )

Answer 3

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.

Full example using your URL:

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  runApp(new MyApp());
}

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

class _MyAppState extends State<MyApp> {

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("InAppWebView")
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                  child: InAppWebView(
                    initialUrl: "https://kreatryx.com",
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      ),
                      androidInAppWebViewOptions: AndroidInAppWebViewOptions(
                        domStorageEnabled: true,
                        databaseEnabled: true,
                      ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

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

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

It works fine in both Android and iOS platform. This is the result:

Answer 4

update

Similar to Android Webview: "Uncaught TypeError: Cannot read property 'getItem' of null"

settings.setDomStorageEnabled(true); is missing.

Related issue https://github.com/flutter/flutter/issues/26347

original

webview_flutter does currently not automatically redirect.

https://kreatryx.com redirects to https://www.kreatryx.com and the plugin doesn't follow that redirect and just shows what https://kreatryx.com returns, which is nothing.

Follow https://github.com/flutter/flutter/issues/25351

Answer 5

For me, I needed to enable Javascript by setting:

javascriptMode: JavascriptMode.unrestricted

WebView(
        javascriptMode: JavascriptMode.unrestricted,
        initialUrl: 'https://example.com',
)

Answer 6

As there is another plugin available which has the ability to automatically redirect to its requested page. Use the given dart plugin: flutter_webview_plugin 0.3.0+2

You can use that plugin from this url: https://pub.dartlang.org/packages/flutter_webview_plugin#-readme-tab-

Sample Code found here:

new MaterialApp(
      routes: {
        "/": (_) => new WebviewScaffold(
          url: "https://kreatryx.com",
          appBar: new AppBar(
            title: new Text("Widget webview"),
          ),
        ),
      },
    );

Answer 7

    Try This Guys U Can Easily Preview PDF Getting From Response.
    
    Uint8List? _documentBytes;
    @override
    void initState() {
      getPdfBytes();
      super.initState();
    }
     
    ///Get the PDF document as bytes
    void getPdfBytes() async {
 Map<String, String> _header = <String, String>{
      'Authorization': _userDataController.userDataModel.token,
      'content-type': 'application/json',
    };
      _documentBytes = await http.readBytes(Uri.parse(
          'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf' Or 'url'));
    headers: _header,
      setState(() {});
    }
     
    @override
    Widget build(BuildContext context) {
      Widget child = const Center(child: CircularProgressIndicator());
      if (_documentBytes != null) {
        child = SfPdfViewer.memory(
          _documentBytes!,
        );
      }
      return Scaffold(
        appBar: AppBar(title: const Text('Syncfusion Flutter PDF Viewer')),
        body: child,
      );
    }

Answer 8

I have solved my issue by changing a single line in NavigationDelegate. Actually, it was causing an error in iOS White Screen.

 ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            // Update loading bar.
          },
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) async {
            if (request.url.startsWith('https://www.somesite.com/')) {
              // do something...
            } else if(request.url.startsWith('http://someothersite.com/')){
              // prevent or do something else if this matches
            }
            return NavigationDecision.navigate;  // <-- Set it to navigate
          },
        ),
      ),