Flutter webview显示空白屏幕答案

【问题标题】：Flutter webview showing blank screenFlutter webview显示空白屏幕
【发布时间】：2020-07-17 12:03:51
【问题描述】：

我正在尝试在我的颤振应用程序上使用 WebView()。在我编写代码后，没有任何错误，但是，在我的模拟器上运行调试模式时，页面是空白的。 AppBar 在那里，文本也在上面，但 body 是一个空白屏幕。

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

      ),
    );
  }
}

【问题讨论】：

我遇到了类似的问题，并将此权限添加到清单到 android/app/src/main/AndroidManifest.xml跨度>

标签： flutter flutterwebviewplugin

【解决方案1】：

这几乎是一种预期的行为。您提供的 initialUrl 似乎是一个不安全的 HTTP 连接。

文档“Insecure HTTP connections are disabled by default on iOS and Android”解释了这一切：

Android 开头API 28 和iOS 9, 这些平台默认禁用不安全的 HTTP 连接。

通过此更改，Flutter 还禁用了移动设备上的不安全连接平台。其他平台（桌面、网络等）不受影响。

您可以通过遵循特定于平台的定义域特定网络策略的指南。见有关详细信息，请参阅下面的迁移指南。

就像平台一样，应用程序仍然可以不安全地打开套接字连接。 Flutter 不会在套接字上强制执行任何策略等级;您将负责保护连接。

以下是示例场景：

场景 1： 使用“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),
      ),
    );
  }
}

场景 2： 使用“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),
      ),
    );
  }
}

场景 3： 使用“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),
      ),
    );
  }
}

【讨论】：