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

image

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);

  
  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);

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

  void _opneUrl() 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 _opneUrl() 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

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (70)初心者向け (22)イベント (15)Nextjs (8)Google Apps Script (7)可茂IT塾 (6)Firebase (6)React (5)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)JavaScript (3)TypeScript (3)インターン (3)FlutterWeb (2)画像 (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)設計 (1)フルリモート (1)学生向け (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)線型計画法 (1)事例 (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)Freezed (1)アイコン (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Figma (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More