Flutter で WebView を使用して、Webページを表示する方法についてご紹介します!
事前準備
パッケージをインストール
Flutter の WebView については、公式のパッケージがあります。
まずは、公式パッケージをインストールしておきましょう。
![](https://hiyoko-programming.com/wp-content/uploads/cocoon-resources/blog-card-cache/5f90b96d791a8f25c70c3ed67a9d1d01.png)
webview_flutter | Flutter Package
A Flutter plugin that provides a WebView widget on Android and iOS.
ターミナルで以下のコマンドを入力しましょう。
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)](https://hiyoko-programming.com/wp-content/uploads/2022/12/flutter_webview_ios-501x1024.png)
![WebView表示例(Android)](https://hiyoko-programming.com/wp-content/uploads/2022/12/flutter_webview_android-485x1024.png)
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有効化)](https://hiyoko-programming.com/wp-content/uploads/2022/12/flutter_webview_ios_js-498x1024.png)
![WebView表示例(Android、js有効化)](https://hiyoko-programming.com/wp-content/uploads/2022/12/flutter_webview_android_js-485x1024.png)
まとめ
Flutter で WebView を使用して Web ページを表示する方法についてご紹介しました!
- 公式パッケージをインストール
- WebView Widget を配置
- JavaScript を有効化
以上で、【Flutter】WebView で Web ページを表示する方法 は終わりです。
コメント