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: () => _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

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More

タグ

Flutter (103)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)新卒 (4)就活 (4)デザイン (4)Dart (4)JavaScript (4)FlutterWeb (3)vscode (3)Prisma (3)NestJS (3)Figma (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)Image (2)File (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)CustomClipper (1)ClipPath (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More