flutter - 空白の画面を表示する Flutter Webview

Question

フラッターアプリで WebView() を使用しようとしています。コードを書いた後、エラーはありませんが、シミュレーターでデバッグモードを実行すると、ページが空白になります。AppBar があり、テキストも表示されますが、本文は空白の画面です。

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

      ),
    );
  }
}

score 0 · Accepted Answer

これはほとんど意図された動作です。initialUrlあなたが提供したは安全でない HTTP 接続のようです。

ドキュメント「安全でない HTTP 接続は、iOS および Android ではデフォルトで無効になっています」は、これに関するすべてを説明しています。

Android API 28 およびiOS 9以降、これらのプラットフォームはデフォルトで安全でない HTTP 接続を無効にします。

この変更により、Flutter はモバイルプラットフォームでの安全でない接続も無効にします。他のプラットフォーム (デスクトップ、Web など) は影響を受けません。

プラットフォーム固有のガイドラインに従ってドメイン固有のネットワークポリシーを定義することで、この動作を無効にすることができます。詳細については、以下の移行ガイドを参照してください。

プラットフォームと同様に、アプリケーションは依然として安全でないソケット接続を開くことができます。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),
      ),
    );
  }
}

flutter - 空白の画面を表示する Flutter Webview

1 に答える 1

Related

Reference