flutterのアプリでurl_launcherを使ってURLをWebブラウザで表示する

Version

• Flutter 2.10.1
• Dart 2.16.1
• url_launcher: ^6.0.18

url_launcherとは

url_launcherとは、flutterのアプリ内でWebサイトを表示したい時などに使用します。url_launcherを使用することで、flutterのアプリ内でURLのサイトを表示したりブラウザを起動してWebページに遷移させることができるようになります。

イメージとしては以下の画像のような感じです。

パッケージのインストール

まずはアプリにurl_launcherのパッケージをインストールをします。パッケージのインストール先はpubspec.yamlファイルです。 url_launcherのパッケージはこちらになります。

pubspec.yamlファイルのdev_dependenciesに以下のように記述します。

※pubspec.yamlファイルは非常にデリケートなので記述する箇所のindent等には注意が必要です。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
    
  url_launcher: ^6.0.18

dev_dependenciesの箇所に上記のように記述したら、画面上のpub getボタン、もしくはターミナルでflutter pub getを入力して実行します。

メッセージやターミナルでエラーが吐かれなければ、アプリにurl_launcherのインストールが完了したことになります。

コード全文

・main.dartファイル

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launch_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      //画面右上の赤いバーナーを消す
      debugShowCheckedModeBanner: false,
      home: UrlLaunchePage(),
    );
  }
}

・url_launch_page.dartファイル

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

class UrlLaunchePage extends StatelessWidget {
  const UrlLaunchePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Url Launcher'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Urlを開く'),
          onPressed: () => _openUrl(),
        ),
      ),
    );
  }

  void _openUrl() async {
    const url = 'https://www.kamo-it.org/'; //←ここに表示させたいURLを入力する
    if (await canLaunch(url)) {
      await launch(
        url,
        forceSafariVC: true,
        forceWebView: true,
      );
    } else {
      throw 'このURLにはアクセスできません';
    }
  }
}

url_launcherの実装(url_launch_page.dartファイルの一部を説明)

void _openUrl() async {
    const url = 'https://www.kamo-it.org/';
    if (await canLaunch(url)) {
      await launch(
        url,
        forceSafariVC: true,
        forceWebView: true,
      );
    } else {
      throw 'このURLにはアクセスできません';
    }
  }

launch()と記述することでurl_launcherを利用できるようになります。launchの部分で実装したい機能をカスタマイズしていく感じになります。

forceSafariVCは、iOSでの挙動を指定するメソッドでfalseにするとSafariを開いてURLのサイトを開く挙動になります。trueにすると、アプリ内でサイトを開く挙動になります。つまり、アプリとは別のSafariタグを開いてURLのサイトを開く挙動をしたい場合は、falseにすることで実装できます。

forceWebViewはAndroidでの挙動を指定するメソッドでfalseにするとブラウザを開いてURLのサイトを開く挙動になります。trueにすると、アプリ内でブラウザを起動してサイトを開く挙動になります。つまり、アプリとは別のタグを開いてURLのサイトを開く挙動をしたい場合は、falseにすることで実装できます。

最後に

いかがでしたでしょうか。意外と簡単にブラウザを起動してWebサイトを表示することができたのではないかと思います。

url_launcherを使うことによって、URLを開いた時の処理やUIなどを記述せずにWebサイトのページ遷移を実装することができます。

今回はurl_launcherというパッケージについて紹介しました。Flutterには他にも便利なライブラリーが豊富に用意されています。

筆者である私自身、便利なライブラリーを使って開発コストを下げつつ、アプリケーションのクオリティーを上げられるように日々勉強をしています。その中で私自身がお勧めする便利なライブラリーがまとめられているサイトは以下の通りです。

・https://github.com/Solido/awesome-flutter

・https://fluttergems.dev/

他にもお勧めのライブラリーやまとめのサイトがございましたらご連絡頂けると幸いです。

参考

https://qiita.com/ryota47/items/0cd30257f063c06df1b8 https://naipaka.hatenablog.com/entry/2021/08/05/091411