【 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のWEBページを開く方法は以上です！

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

編集後記（2023/1/4）