はじめに
アプリを作成しているとウェブブラウザに遷移することなく、アプリ内にウェブビューを表示したいことがあります。
そこで今回はWebViewを実装する方法を紹介しようと思います。
環境
- Flutter 1.22.5
- webview_flutter 1.0.7
実装方法
プラグインの最新バージョンを確認
下記のサイトにアクセスし、バージョンを確認します。
記事作成の時点では1.0.7が最新バージョンでした。
プラグインのインストール
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
その後、プロジェクト配下で「flutter pub get」コマンドを実行します。
よくわからない場合はAndroid Studioでpubspec.yamlファイルを開くと右上に「Pub get」ボタンがあるのでそれを押してください。
詳しくは後で説明しますが、webview_flutterのプラグインはAndroidでAPI Level 19以上にする必要があります。以下のようにminSdkVersionを書き換えます。
/android/app/build.gradle
android {
defaultConfig {
// Required by the Flutter WebView plugin.
minSdkVersion 19
}
}これでプラグインのインストールは完了です。
サンプルコード
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
if (Platform.isAndroid) {
WebView.platform = SurfaceAndroidWebView();
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo Home Page'),
),
body: Center(
child: WebView(
initialUrl: "https://www.google.com/",
),
),
);
}
}
実行結果
簡単に実装できました！
注意点
このWebViewは注意点があります。それは日本語入力が出来ないことです。
ただし、サンプルコードのように以下のコードを追加することで日本語入力ができるようになります。
if (Platform.isAndroid) {
WebView.platform = SurfaceAndroidWebView();
}このプラグインのAndroidの内部実装のデフォルトはVirtual DisplayベースのPlatformViewで作られているそうです。キーボード入力が必要な場合は、Hybrid CompositionベースのPlatformViewを使うことが推奨されています。
上記のコードを追加することでHybrid CompositionベースのPlatformViewを使うので、日本語入力等出来るようになるわけです。
ただし、このHybrid CompositionベースのPlatformViewはAndroid 10以前のAndroidバージョンではパフォーマンス上の欠点があるそうです。詳しくはFlutter公式サイトに書かれているので確認してみてください。
さいごに
WebViewまでもこんなに簡単に実装出来てしまうなんてFlutter素敵すぎます。
またもう少し踏み入ったWebViewの実装方法は以下の記事を参考にしてください。
コメント