[Flutter]WebViewを実装する方法

はじめに
環境
実装方法
さいごに
おすすめ参考書

はじめに

アプリを作成しているとウェブブラウザに遷移することなく、アプリ内にウェブビューを表示したいことがあります。

そこで今回はWebViewを実装する方法を紹介しようと思います。

環境

Flutter 1.22.5
webview_flutter 1.0.7

実装方法

プラグインの最新バージョンを確認

下記のサイトにアクセスし、バージョンを確認します。

webview_flutter | Flutter package

A Flutter plugin that provides a WebView widget on Android and iOS.

記事作成の時点では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公式サイトに書かれているので確認してみてください。

Hosting native Android views in your Flutter app with Platform Views

Learn how to host native Android views in your Flutter app with Platform Views.

さいごに

WebViewまでもこんなに簡単に実装出来てしまうなんてFlutter素敵すぎます。

またもう少し踏み入ったWebViewの実装方法は以下の記事を参考にしてください。