[Flutter] iOS에서 url_launcher를 사용하여 외부 브라우저 열기

2022-05-13 hit count image

Flutter의 url_launcher를 사용하여 iOS에서 웹 링크를 앱 내부 브라우저가 아닌, 앱 외부의 기본 브라우저로 열어주는 방법을 알아보겠습니다.

개요

이번 블로그 포스트에서는 url_launcher를 사용하여 iOS에서 웹 링크를 앱 내부가 아닌 앱 외부의 기본 브라우저로 여는 방법에 대해서 알아보도록 하겠습니다.

url_launcher의 기본 사용법에 관해서는 이전 블로그 포스트를 참고하시기 바랍니다.

이 블로그 포스트에서 소개하는 소스 코드는 아래에 링크에서 확인할 수 있습니다.

url_launcher 설치

Flutter에서 url_launcher을 사용하기 위해 다음 명령어를 사용하여 Flutter의 새로운 프로젝트를 생성합니다.

flutter create url_launcher_external_link

그런 다음 명령어를 실행하여 url_launcher 패키지를 설치합니다.

# cd url_launcher_external_link
flutter pub add url_launcher

이제 이렇게 설치한 url_launcher를 사용하여 앱 외부의 브라우저를 여는 방법에 대해서 알아봅시다.

설정

url_launcher를 사용하여 웹 브라우저에 링크를 열기 위해서는 다음과 같은 설정을 할 필요가 있습니다.

iOS

iOS에서 url_launcher를 사용하기 위해서는 ios/Runner/Info.plist 파일을 열고 다음과 같이 수정해야 합니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  ...
  <key>LSApplicationQueriesSchemes</key>
  <array>
    <string>https</string>
    <string>http</string>
  </array>
</dict>
</plist>

Android

Android에서 url_launcher를 사용하여 웹 브라우저로 링크를 열기 위해서는 android/app/src/main/AndroidManifest.xml 파일을 열고 다음과 같이 수정해야 합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.url_launcher_example">
    <queries>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="https" />
        </intent>
    </queries>

   <application>
        ...
    </application>
</manifest>

forceSafariVC 옵션으로 브라우저 열기

url_launcher를 사용하여 외부 브라우저로 링크를 열기 위해 lib/main.dart 파일을 열고 다음과 같이 수정합니다.

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('url_launcher demo'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open'),
          onPressed: () async {
            final url = Uri.parse('https://dev-yakuza.posstree.com/en/');
            if (await canLaunchUrl(url)) {
              launchUrl(url, mode: LaunchMode.externalApplication);
            }
          },
        ),
      ),
    );
  }
}

이를 실행하면 다음과 같이 Open 버튼이 가운데 표시된 화면을 확인할 수 있습니다.

Flutter - url_launcer external link example

이제 Open 버튼을 누르면 다음과 같이 앱 내부에서 웹 페이지로 이동하는 것을 확인할 수 있습니다.

Flutter - url_launcer external link browser in app

이제 이를 수정하기 위해, 다음과 같이 lib/main.dart 파일을 수정합니다.

...
onPressed: () async {
  ...
  launchUrl(url, mode: LaunchMode.externalApplication);
  ...
},
...

launchUrl 함수로 링크를 열때, mode 옵션에 LaunchMode.externalApplication를 설정하면, 앱 내부의 브라우저가 아닌 앱 외부의 기본 브라우저로 웹 페이지를 열 수 있습니다.

앱을 다시 실행하고 Open 버튼을 누르면, 이전과는 다르게 다음과 같이 앱 외부의 브라우저가 열리는 것을 확인할 수 있습니다.

Flutter - url_launcer external link default browser

완료

이것으로 url_launcher를 사용하여 링크를 앱 내부의 브라우저가 아닌 앱 외부의 기본 브라우저로 여는 방법에 대해서 살펴보았습니다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
Posts