【 url_launcher 】アプリからWEBページを開こう！【 Flutter 】

「アプリのボタンをタップしたら自分のHPに移動するようにしたい！」

本記事ではそんな要望にお答えします。

アプリから特定のURLのWEBページを開く方法として、 url_launcher パッケージを利用した方法を紹介します。

url_launcher パッケージでのアプリから電話の発信画面やメールの送信画面に移動する方法も併せて紹介します。

ぜひ読んでみてください！

特定のURLのWEBページを開く方法

url_launcher パッケージを利用した、アプリから特定のURLのWEBページを開く方法を紹介します。

準備

まず準備として、パッケージのインストールと、 Dartファイルへのインポート文の追加を行います。

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

CLI(macならターミナル)で、自分のプロジェクトのルートにて以下のコマンドを実行しパッケージをインストールします。

flutter pub add url_launcher

パッケージのインポート

実装したいDartファイルの上部に以下のインポート文を追加し、パッケージをインポートします。

import 'package:url_launcher/url_launcher.dart';

実装

実装方法を紹介します。

以下のコードで開きたいWEBページのURL をURIとして取得します。

final url = Uri.parse('https://blog.flutteruniv.com/');

launchUrlメソッドを実行することで、URLのWEBページヘ移動する処理を呼び出します。

launchUrl(url);

以下のサンプルコードではボタンを押すと週刊Flutter大学のトップページに移動するアプリを紹介しています。

サンプルコード全体

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            final url = Uri.parse('https://blog.flutteruniv.com/');
            launchUrl(url);
          },
          child: const Text('週刊Flutter大学を表示'),
        ),
      ),
    );
  }
}

簡潔な説明のため今回のサンプルコードでは URLが開けない際のエラーハンドリング等を省略しています。

特定のURLのWEBページを開く方法は以上です！

電話の発信画面やメールの送信画面に移動する方法

url_launcherパッケージを利用した、電話の発信画面やメールの送信画面に移動する方法を紹介します。

Android, iOSのアプリを対象として紹介します。

iOSの場合、シミュレーターではなく実機でアプリを実行する必要があります。

電話の発信画面に移動する方法

URIを以下のように設定することで、電話の発信画面に移動することができます。

final uri = Uri.parse('tel:+**-**-****-****'); //*は数字

このURIをlaunchUrlすれば電話の発信画面に移動するかを尋ねる表示を表示することができます。

メールの送信画面に移動する方法

URIを以下のように設定することで、電話の発信画面に移動することができます。

final uri = Uri.parse('mailto:********@******.***?subject=件名&body=本文');

**************.***はメールアドレスを、 subjetct=の後にメールの件名を、 body=の後にメールの本文を記載することができます。このURIをlaunchUrlすればメールの送信画面に移動することができます。

canLaunchUrl というメソッドで、引数のURIで開くアプリが存在するかを検証することができます。（例えばWEBページのリンクなら、ブラウザアプリが１つ以上存在するか、等）

このメソッドを使うにはAndroidManifest.xml等にて設定が必要です。詳細はurl_launcher のReadmeを御覧ください。

まとめ

アプリから特定のURLのWEBページを開く方法として、 url_launcher パッケージを利用した方法を紹介します。

url_launcher パッケージでのアプリから電話の発信画面やメールの送信画面に移動する方法も併せて紹介します。

アプリから特定のURLを開いたり、お問い合わせ先の電話をかけることができたり、メールをすることができたりするアプリは、かなり便利だと思っています。

ぜひ、url_launcherパッケージを使用して実装してみてください！

本記事があなたのアプリ開発の一助となれば幸いです。

Flutterを一緒に学んでみませんか？ Flutter エンジニアに特化した学習コミュニティ、Flutter大学への入会は、以下の画像リンクから。

編集後記（2023/1/4）

url_launcher についての記事でした。

このパッケージはかなり良くて、 twitterアプリを開く、なんてことも可能だったりします。

以前共同開発した『つみあげったー』というアプリで、 url_launcherを用いてツイート機能を実装しました。

共同開発といえば第11期の共同開発のキックオフが本日20:00から実施されます。

以下のYouTubeリンクから誰でも視聴可能ですので、是非見ていただければと思います。

以上、編集後記でした。

週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。記事の更新情報はFlutter大学Twitterにて告知します。ぜひぜひフォローをお願いいたします。