PR

[Flutter]WebViewを実装する方法

Flutter

はじめに

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

そこで今回は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.yamldependenciesに「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 Studiopubspec.yamlファイルを開くと右上に「Pub get」ボタンがあるのでそれを押してください。

詳しくは後で説明しますが、webview_flutterのプラグインはAndroidAPI 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の実装方法は以下の記事を参考にしてください。

おすすめ参考書

コメント

  1. I’m impressed, I must say. Rarely do I encounter a blog that’s both educative and interesting, and let me tell you, you have hit the nail on the head.

    The issue is an issue that not enough men and women are speaking intelligently about.
    I am very happy that I stumbled across this during my search for something relating to this.

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