【Flutter】WebView で Web ページを表示する方法

Flutter で WebView を使用して、Webページを表示する方法についてご紹介します！

事前準備
1. パッケージをインストール
2. Android minSDK の設定変更
WebView の使い方
1. WebView Widget を配置
2. JavaScript を有効化
まとめ
参考
おすすめ書籍

事前準備

パッケージをインストール

Flutter の WebView については、公式のパッケージがあります。
まずは、公式パッケージをインストールしておきましょう。

webview_flutter | Flutter package

A Flutter plugin that provides a WebView widget backed by the system webview.

ターミナルで以下のコマンドを入力しましょう。

flutter pub add webview_flutter

pubspec.yaml に以下5行目のような記載が追加されれば OK です。

dependencies:
  flutter:
    sdk: flutter
  
  webview_flutter: ^3.0.4

パッケージのインストール方法については、以下の記事で詳しくご紹介していますので、よろしければご参照ください。

Android minSDK の設定変更

Android で WebView を使用するには、Android minSDK を19 以上にする必要があります。
android/app/build.gradle ファイルを開いて、以下の4行目のように変更しておきましょう。

defaultConfig {
    // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
    applicationId "com.example.sample"
    minSdkVersion 19
    targetSdkVersion 30
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

WebView の使い方

WebView を使用するには、以下のようにインポートします。

import 'package:webview_flutter/webview_flutter.dart';

WebView Widget を配置

WebView Widget を配置することで、WebView を表示できます。
initialUrl プロパティに表示する Web ページの URL を指定します。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text("WebView Sample"),
    ),
    body: const WebView(
      initialUrl: 'https://hiyoko-programming.com/',
    ),
  );
}

以下が実行例です。デフォルトでは JavaScript が無効になっているため、表示が一部おかしくなっています。

JavaScript を有効化

9行目の部分を追加をして、JavaScript を有効化しましょう。

@override
Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        title: const Text("WebView Sample"),
      ),
      body: const WebView(
        initialUrl: 'https://hiyoko-programming.com/',
        javascriptMode: JavascriptMode.unrestricted,
      ),
  );
}

JavaScript を有効化した実行例が以下です。ブラウザの場合と同じ表示になっています。