【Flutter】外部ブラウザ(Webサイト)を立ち上げる方法を解説

2024年2月24日2024年4月2日

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事を読んでわかること

url_launcherパッケージの設定
外部ブラウザを立ち上げる方法

開発環境

Dart 3.0.0
Flutter 3.10.0
url_launcher ^6.0.3

外部ブラウザを立ち上げる準備

url_launcherパッケージの概要

url_launcherは、Flutterアプリケーションから電話、SMS、Eメールといった外部アプリケーションやウェブサイトを開くためのパッケージです。バージョン6.0.3を使用して、外部のWebサイトをブラウザで開く方法を紹介します。

パッケージの追加

pubspec.yamlファイルに以下の依存関係を追加します。

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.0.3

外部ブラウザを立ち上げる方法

概要

Flutterで外部ブラウザを立ち上げるには、launchUrl関数を使用します。この関数は、指定したURLを外部ブラウザで開くために設計されています。

サンプルコード

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

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

class MyApp extends StatelessWidget {
  final Uri _url = Uri.parse('https://memoriainc.com');

  Future<void> _launchUrl() async {
    if (!await launchUrl(_url)) {
      throw 'Could not launch $_url';
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('外部ブラウザでWebサイトを開くデモ'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _launchUrl,
            child: Text('外部ブラウザを起動'),
          ),
        ),
      ),
    );
  }
}

サンプルコードの詳細解説

1-2行目: 必要なパッケージをインポートします。material.dartはFlutterの基本的なUI要素を提供し、url_launcher.dartはURLを起動する機能を提供します。
4行目: アプリケーションのメイン関数です。アプリケーションが起動されるとこの関数が最初に実行されます。
8-33行目: MyAppクラスは、アプリケーションのルートウィジェットを定義します。StatelessWidgetを継承しています。
9行目: _urlはUri.parseを使用して、開きたいWebサイトのURLをUriオブジェクトに変換します。
11-15行目: _launchUrl関数はlaunchUrl関数を非同期で呼び出し、指定されたURLを外部ブラウザで開きます。もしURLが開けなかった場合は例外を投げます。
18-32行目: buildメソッドでは、アプリケーションのUIを定義します。Scaffoldウィジェットを使用して基本的なアプリケーションのレイアウトを作成し、AppBarとElevatedButtonウィジェットを使用してUIを構成します。

動作確認

いちの

それでは、動作を確認してみましょ〜

ボタン押下時の処理では、非同期通信を行うという事がよくあります。(例えばAPIを叩いたり)以下の記事では、ボタン押下時の非同期処理について分かりやすく解説してますので、興味のある読者様。ご一読いただけますと幸いです。

まとめ

いかがでしたでしょうか？今回は、Flutterを使って外部ブラウザを起動する方法について解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。