Flutter webview showing blank screen - flutter

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