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

Flutter

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

事前準備

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

Flutter の 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 が無効になっているため、表示が一部おかしくなっています。

WebView表示例(iOS)
iOS
WebView表示例(Android)
Android

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 を有効化した実行例が以下です。ブラウザの場合と同じ表示になっています。

WebView表示例(iOS、js有効化)
iOS
WebView表示例(Android、js有効化)
Android

まとめ

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

  1. 公式パッケージをインストール
  2. WebView Widget を配置
  3. JavaScript を有効化

以上で、【Flutter】WebView で Web ページを表示する方法 は終わりです。

参考

おすすめ書籍

コメント

タイトルとURLをコピーしました