Flutter webview showing blank screen

Question

I am trying to use WebView() on my flutter app. After I wrote the code there are not any errors, however, when running the debug mode on my simulator the page is blank. The AppBar is there and the text is on it also, but the body is a blank screen.

import 'package:flutter/material.dart';

import 'package:webview_flutter/webview_flutter.dart';

class Audio extends StatefulWidget {
  @override
  _AudioState createState() => _AudioState();
}

class _AudioState extends State<Audio> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Audio"),
      ),
      body: WebView(
        key: UniqueKey(),
        initialUrl: "http://google.com",
        javascriptMode: JavascriptMode.unrestricted

      ),
    );
  }
}

Answer 1

This is pretty much an intended behavior. It seems that the initialUrl you've provided is an insecure HTTP connection.

The documentation " Insecure HTTP connections are disabled by default on iOS and Android " explains everything about this:

Starting with Android API 28 and iOS 9 , these platforms disable insecure HTTP connections by default.

With this change Flutter also disables insecure connections on mobile platforms. Other platforms (desktop, web, etc) are not affected.

You can override this behavior by following the platform-specific guidelines to define a domain-specific network policy. See the migration guide below for details.

Much like the platforms, the application can still open insecure socket connections. Flutter does not enforce any policy at socket level; you would be responsible for securing the connection.

Here are the sample scenarios:

Scenario 1: Using "http://google.com"

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(Audio());
}

class Audio extends StatefulWidget {
  @override
  _AudioState createState() => _AudioState();
}

class _AudioState extends State<Audio> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Audio"),
        ),
        body: WebView(
            key: UniqueKey(),
            initialUrl: "http://google.com",
            javascriptMode: JavascriptMode.unrestricted),
      ),
    );
  }
}

Scenario 2: Using "google.com"

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(Audio());
}

class Audio extends StatefulWidget {
  @override
  _AudioState createState() => _AudioState();
}

class _AudioState extends State<Audio> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Audio"),
        ),
        body: WebView(
            key: UniqueKey(),
            initialUrl: "google.com",
            javascriptMode: JavascriptMode.unrestricted),
      ),
    );
  }
}

Scenario 3: Using "https://www.google.com/"

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(Audio());
}

class Audio extends StatefulWidget {
  @override
  _AudioState createState() => _AudioState();
}

class _AudioState extends State<Audio> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Audio"),
        ),
        body: WebView(
            key: UniqueKey(),
            initialUrl: "https://www.google.com/",
            javascriptMode: JavascriptMode.unrestricted),
      ),
    );
  }
}