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

2022.02.13
ジョー
Flutter

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の例

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

まずはアプリに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にすることで実装できます。