ウェブサイト

Flutterアプリ開発

Flutterでウェブ表示するwebview_flutterの特徴とその使い方について解説!

Flutterでアプリ開発をしているとウェブ表示をしたいという要望が出てくることがあります。そういう時に使えるwebvview_flutterというプラグインについて解説していきます。

Flutterのwebview_flutterとは?

webview_flutterは、Flutter上でウェブ表示をするためのプラグインです。Flutterを開発しているチームであるflutter.devが公式でサポートしています。

公式がサポートしていることもありFlutterのアップデートに追従してメンテナンスされているという良さがあります。

webview_flutterで出来ること

webview_futterには以下のような特徴があり、基本的な操作の提供や安定したメンテナンスなどが挙げられます。

  • flutter.devで開発・メンテナンスされている
  • 基本的なウェブビューの機能を利用できる
  • AndroidのWebView、iOSのWKWebViewを利用する

使われているパッケージ

webview_flutterの内部では、下記のパッケージが利用されています。下記のパッケージを利用することで、OSごとの異なる挙動を吸収して同じような操作をすることができるようになっています。

  • webview_flutter_wkwebview
  • webview_flutter_android
  • webview_flutter_platform_interface

flutter_inappwebviewとの違い

flutter_inappwebviewは、webview_flutterと比較するとプロダクトのニーズに合わせてより柔軟なインターフェースをカスタマイズできたり、多くの機能が提供されています。

より細かな違いについては以下の記事を参考にしてみてください。
FlutterのWebViewとはどんな機能?特徴や実装方法を一挙紹介!

webview_flutterの使い方

下記のコマンドでパッケージを追加するか、直接pubspec.ymlのdependenciesに追記するかでインストールすることができます。

flutter pub add webview_flutter

pubspec.ymlに追記する場合は、以下の通り。

dependencies:
  webview_flutter: ^4.7.0 // バージョンは適宜調整

追加した後、コンソール上で下記コマンドを実行します。

flutter pub get

Webページを表示する

Webページは、以下の方法でWebページを表示することができます。表示だけれあれば、非常に簡単にできてしまいます。

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

// WebviewControllerの初期化
controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(const Color(0x00000000))

  // NavigationDelegateの初期化
  ..setNavigationDelegate(NavigationDelegate())
  ..loadRequest(Uri.parse('https://flutter.dev'));

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Flutter Simple Example')),
    body: WebViewWidget(controller: controller),
  );
}

ナビゲーション

Webビューでページを戻ったりリロードしたりするためには、WebViewControllerNavigationDelegate というクラスを利用します。下記は、ページを戻る例です。

その他、オプション的な操作

Cookieを操作する

webview_flutterは基本的クッキーの値を取得する方法を提供してないため、JavaScriptでクッキーを取得するためのコマンドを実装する必要があります。

final cookies = await _webViewController.runJavascriptReturningResult(
  'document.cookie',
);
print(cookies);

JavaScriptから実行する

WebViewControllerの関数を利用することでJavaScriptからflutterのコードを実行することができます。下記の例ではJavaScriptからFlutterのコードを callFlutterFunc という関数名で呼び出しています。

Future<void> setup() async {
    await webViewController.setJavaScriptMode(JavaScriptMode.unrestricted);
    await webViewController.loadRequest(Uri.parse('http://10.0.2.2'));

    await webViewController.addJavaScriptChannel(
        'callFlutterFunc',
        onMessageReceived: flutterFunc,
    );
}

Future<void> flutterFunc(JavaScriptMessage result) async {
    final jsonData = jsonDecode(result.message) as Map<String, dynamic>;

    await _controller
        .runJavaScriptReturningResult(jsonData['message']});
}

下記がJavaScriptのコードです。

window.sendMessage.postMessage(JSON.stringify({ type: 'callFlutterFunc', message: "Hello, flutterFunc!" }));

UserAgent

ユーザーエージェントを取得する方法は、WebViewControllerのgetUserAgent()メソッドとして提供されています。

controller.getUserAgent();

Privacy Manifest 対応

webview_flutter: 4.5.0 から対応しています。

ウェブサイトFlutterでウェブ表示するflutter_inappwebviewの特徴とその使い方について解説!Prev

Riverpodの仕組みと使い方について解説Next

Related post

  1. Flutterアプリ開発

    初めてでも開発できるFlutter入門

    FlutterでAndroidやiPhoneアプリを作りたいけれど、ど…

  2. ウェブサイト
  3. dart

    Flutterアプリ開発

    FlutterのWebViewとはどんな機能?特徴や実装方法を一挙紹介!

    Webページを表示するモバイルアプリはよくありますよね。Flutter…

  4. Flutterアプリ開発

    Flutterを使ったタスク管理アプリUIの作り方を解説

    Flutterを使ったアプリ開発について勉強してきたら、それらの知識を…

  5. Flutterアプリ開発

    Riverpodの仕組みと使い方について解説

    Flutterで利用できる状態管理ライブラリの1つです。Flutter…

  6. Provider解説

    Flutterアプリ開発

    【初心者向け】Flutter Providerパッケージの基本から応用まで

    Flutterの状態管理パッケージ「Provider」の基本概念から応…

PAGE TOP