FlutterでWebサイトを表示する方法２種

Flutterアプリケーションにおいて、外部ウェブコンテンツを表示するためには、flutter_custom_tabsとwebview_flutterの2つの主要なパッケージが利用できる。以下に、それぞれのパッケージの概要と、使用すべき具体的な場合について述べる。

flutter_custom_tabs

概要

flutter_custom_tabsは、AndroidではChrome Custom Tabsを、iOSではSafariViewControllerを利用してURLを開くためのパッケージである。このパッケージを使用することで、カスタマイズ可能なブラウザタブを開くことができ、アプリ内でウェブページをシームレスに表示できる。

使用例

• シンプルな外部リンクの表示: アプリから外部のウェブページを開く場合。例えば、ユーザーが詳細情報を求めて外部のニュース記事やドキュメントページにアクセスする際に適している。
• 既存の認証フローの利用: サードパーティの認証サービス（例：Google、Facebook）を利用する場合に適している。ユーザーが外部ブラウザを使わずに認証できるため、利便性が高い。

具体例

ニュースアプリで、記事の詳細を外部サイトで確認する場合などが該当する。この場合、ユーザーはアプリを離れることなく、外部コンテンツにアクセスできる。

import 'package:flutter/material.dart';
import 'package:flutter_custom_tabs/flutter_custom_tabs.dart';

void openCustomTab(BuildContext context, String url) async {
  try {
    await launch(
      url,
      option: CustomTabsOption(
        toolbarColor: Theme.of(context).primaryColor,
        enableDefaultShare: true,
        enableUrlBarHiding: true,
        showPageTitle: true,
      ),
    );
  } catch (e) {
    print(e.toString());
  }
}

webview_flutter

概要

webview_flutterは、Flutterアプリ内にWebViewを埋め込むためのパッケージである。このパッケージを使用することで、ウェブコンテンツをアプリ内の一部として表示し、JavaScriptやその他のウェブ技術を利用したインタラクティブなコンテンツを提供することができる。

使用例

• 複雑なウェブアプリの埋め込み: ウェブベースのアプリケーションやサービスをアプリ内に完全に統合する場合に適している。例えば、オンラインフォームやダッシュボードの埋め込みが考えられる。
• カスタム認証フローの実装: OAuthやSSOなどの複雑な認証フローを処理する場合に適している。ユーザーがアプリ内で安全に認証を完了できる。
• リッチなコンテンツの表示: マルチメディア、インタラクティブな地図、チャートなどのリッチコンテンツを表示する場合に有用である。

具体例

銀行アプリケーションでの支払い認証フローを実装する場合が該当する。ユーザーはアプリ内で安全に認証プロセスを完了することができる。

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: 'Bank App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BankTransferAuthScreen(url: 'https://www.bank.com/authenticate'),
    );
  }
}

class BankTransferAuthScreen extends StatelessWidget {
  final String url;

  BankTransferAuthScreen({required this.url});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Authenticate Transfer'),
      ),
      body: WebView(
        initialUrl: url,
        javascriptMode: JavascriptMode.unrestricted,
        onPageFinished: (url) {
          if (url.contains('success')) {
            Navigator.pop(context, 'success');
          } else if (url.contains('failure')) {
            Navigator.pop(context, 'failure');
          }
        },
      ),
    );
  }
}

まとめ

• flutter_custom_tabsは、シンプルな外部リンクの表示や既存の認証フローの利用に適している。
• webview_flutterは、複雑なウェブアプリの埋め込みやカスタム認証フローの実装、リッチなコンテンツの表示に適している。

このように、アプリの要件に応じて適切なパッケージを選択することが重要である。