ウェブビューを使用する

ウェブビュー WebView を使えば、ウェブページをアプリ内に表示することができます。

プラグインのインストール

プロジェクトフォルダ直下に位置する pubspec.yaml の dependencies ブロックの中に、 webview_flutter: ^1.0.7 を記述します。

例えば、

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0
  webview_flutter: ^1.0.7

のようになります。

そして、pubspec.yaml を開いている状態で、ページ上部に Pub get コマンドがあるのでクリックしてください。

すると、Android Studio 下部に flutter pub get コマンドが実行されている状態が出力されます。

何も問題なければ、 Process finished with exit code 0 と出力されて、インストールが完了します。

この一連の動作は、ターミナル上でも実行できます。ターミナルを開いて、以下のコマンドを入力してください。

$ flutter pub get

使い方

上記で利用するプラグインをインストールしましたが、そのプラグインを実際に使うためには、プラグインのファイルをインポートする必要があります。

使いたい .dart ファイル上部に、インポートするファイル名を以下のように記載します。

import 'package:webview_flutter/webview_flutter.dart';

これで、ウェブビュー表示用の Widget WebView が使えるようになります。

そして、以下のような Widget クラスを作ります。

引数 initialUrl に指定したウェブサイトのURLを記入するだけで、アプリ内で外部のウェブサイトを開くことができます。

class WebViewFlutter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: 'https://nzigen.com/',
        ),
      ),
    );
  }
}

今回の例では、私たちエヌ次元のウェブサイトを表示させてみました。

Youtubeの動画を視聴する

では、ウェブビューを使ってYoutubeの動画を視聴してみましょう。

今回の例では、Flutter の公式 Youtube チャンネルが作成した WebView Widget 紹介の動画を開いてみます。

ウェブビューで開くサイトを変更したい場合は、 initialURL プロパティに渡す URL アドレスを変えます。

WebView(
  initialUrl: 'https://www.youtube.com/watch?v=RA-vLF_vnng',
);

これで実行してみると、ウェブページにアクセスできても、動画プレイ画面が真っ黒で、ロード中のグルグルマークが表示されてしまいます。

その理由は、WebView は Javascript がデフォルトで無効化されているからです。

そのため、 Youtube 動画のような動的コンテンツを表示させるためには、 Javascript を有効化する必要があります。

その実装は、 WebView のプロパティに javascriptMode を以下のように追記して設定するだけです。

WebView(
  initialUrl: 'https://www.youtube.com/watch?v=RA-vLF_vnng',
  javascriptMode: JavascriptMode.unrestricted,
);

これで、再度実行してみると　WebView Widget 紹介の動画が見れるようになります。

参考リンク

• webview_flutter Flutter Package
• WebView class