How to fix white screen in webview_flutter?

Viewed 18438
7 Answers

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.

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),
      ...
 )

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:

enter image description here

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

for me, I needed to enable Javascript with setting:

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

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