Flutter 앱에서 웹 페이지를 열거나 다른 앱으로 데이터를 전달하는 기능은 필수적입니다. url_launcher 패키지는 이러한 작업을 간편하게 수행할 수 있도록 지원하며, 다양한 옵션을 통해 개발자가 원하는 대로 URL을 탐색할 수 있도록 합니다.
1. 설치
프로젝트에 url_launcher 패키지를 설치하려면 다음 명령어를 실행합니다.
pub add url_launcher
2. 기본 사용
2.1 브라우저로 URL 열기
launchUrl() 함수를 사용하여 브라우저에서 URL을 엽니다.
import 'package:url_launcher/url_launcher.dart';
Future<void> _launchURL() async {
final String url = 'https://www.google.com';
if (await canLaunchUrl(url)) {
await launchUrl(Uri.parse(url));
} else {
throw 'Could not launch URL';
}
}
2.2 앱 스키마 사용하여 데이터 전달
launchUrl() 함수를 사용하여 다른 앱으로 스키마를 사용하여 데이터를 전달합니다.
Future<void> _launchApp() async {
final String appScheme = 'myapp://';
final String data = 'This is my data';
final String url = '$appScheme$data';
if (await canLaunchUrl(url)) {
await launchUrl(Uri.parse(url));
} else {
throw 'Could not launch URL';
}
}
URL 스키마의 구조 참고
URL 스키마는 다음과 같은 기본 구조를 가집니다:
- scheme (스키마): 리소스에 접근하는 프로토콜 또는 방식 (예: http, https, mailto, tel, customschema)
- authority: 도메인 이름 또는 IP 주소 (옵션)
- path: 리소스 경로
- query: 추가적인 파라미터 (옵션)
3. 옵션
3.1 강제 웹 브라우저 사용
forceWebView 매개 변수를 true로 설정하면 기기의 기본 브라우저 대신 항상 웹 브라우저를 사용하여 URL을 엽니다.
await launchUrl(Uri.parse(url), forceWebView: true);
3.2 웹 브라우저 사용 여부 확인
canLaunchUrl() 함수를 사용하여 특정 URL을 기기의 기본 브라우저에서 열 수 있는지 확인합니다.
if (await canLaunchUrl(url)) {
// URL을 열 수 있습니다.
} else {
// URL을 열 수 없습니다.
}
3.3 맞춤 브라우저 탭 설정
customTabsConfiguration 매개 변수를 사용하여 Chrome 커스텀 탭의 모양과 동작을 설정할 수 있습니다.
final CustomTabsConfiguration customTabsConfiguration = CustomTabsConfiguration(
toolbarColor: Colors.blue,
enableUrlBarHiding: true,
showTitle: true,
actionButtons: [
CustomTabsActionButton(
icon: Icon(Icons.share),
label: 'Share',
),
],
);
await launchUrl(Uri.parse(url), customTabsConfiguration: customTabsConfiguration);
3.4 Chrome Custom Tabs 지원 여부 확인
isChromeCustomTabsSupported() 함수를 사용하여 기기에서 Chrome Custom Tabs를 지원하는지 확인합니다.
if (await isChromeCustomTabsSupported()) {
// Chrome Custom Tabs를 사용할 수 있습니다.
} else {
// Chrome Custom Tabs를 사용할 수 없습니다.
}
3.5 Chrome Custom Tabs 색상 테마 설정
androidManifest 파일을 사용하여 Chrome Custom Tabs의 색상 테마를 설정합니다.
<activity
android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" />
</intent-filter>
<meta-data
android:name="android.support.customtabs.customTabsColor"
android:resource="@color/custom_tab_color" />
</activity>
3.6 iOS Universal Links 설정
Info.plist 파일을 사용하여 iOS Universal Links를 설정합니다.
<key>NSAppTransport
3.7 플랫폼 별 설정
launchUrl() 함수의 headers 매개 변수를 사용하여 플랫폼별 추가 헤더를 설정할 수 있습니다.
final Map<String, String> headers = {'platform': 'flutter'};
await launchUrl(Uri.parse(url), headers: headers);
3.8 URL 쿼리 매개 변수 설정
launchUrl() 함수의 queryParameters 매개 변수를 사용하여 URL 쿼리 매개 변수를 설정할 수 있습니다.
final Map<String, String> queryParameters = {'q': 'search term'};
await launchUrl(Uri.parse(url), queryParameters: queryParameters);
3.9 URL 정규 표현식 검사
isLink() 함수를 사용하여 특정 문자열이 유효한 URL인지 확인합니다.
final String text = 'https://www.example.com';
if (await isLink(text)) {
// 유효한 URL입니다.
} else {
// 유효한 URL이 아닙니다.
}
3.10 URL 인코딩 및 디코딩
Uri.encodeQueryComponent() 및 Uri.decodeQueryComponent() 함수를 사용하여 URL 문자열을 인코딩 및 디코딩합니다.
final String encodedUrl = Uri.encodeQueryComponent('This is my data with spaces');
final String decodedUrl = Uri.decodeQueryComponent(encodedUrl);
4. 주의 사항
- url_launcher 패키지는 Flutter 2.0 이상에서만 사용할 수 있습니다.
- URL을 열기 전에 canLaunchUrl() 함수를 사용하여 해당 URL을 기기에서 처리할 수 있는지 확인해야 합니다.
- 사용자가 앱 설치를 거부하거나 해당 앱이 설치되지 않은 경우 URL을 열 수 없습니다.
- 일부 URL은 기기에서 처리할 수 없을 수 있습니다.
- Android 9(Pie) 이하 버전에서는 Chrome Custom Tabs가 기본적으로 지원되지 않으며, 별도의 설정이 필요할 수 있습니다.
5. 참고자료
6. 마무리
url_launcher 패키지는 Flutter 앱에서 간편하게 URL을 탐색하고 다른 앱과 데이터를 공유하는 데 매우 유용한 도구입니다. 다양한 옵션을 통해 개발자가 원하는 대로 URL을 처리할 수 있도록 지원하며, 앱 기능을 확장하고 사용자 경험을 향상시키는 데 도움이 됩니다.
본 블로그 게시글에서 다룬 내용을 참고하여 Flutter 앱에서 URL 탐색 기능을 효과적으로 활용하시기 바랍니다. 궁금한 점이나 도움이 필요한 부분이 있으면 언제든지 질문해주세요.
'Flutter > Package' 카테고리의 다른 글
플러터 상태관리: BLoC 심층 가이드 (0) | 2024.07.22 |
---|---|
플러터에서 local_auth 패키지사용하여 지문인식을 사용한 로그인 구현 (1) | 2024.07.18 |
플러터에서 알림을 간편하게 구현하는 flutter_local_notifications 패키지: 주의 사항 및 고급 기능 (0) | 2024.07.18 |
플러터에서 Image Picker 패키지 옵션 살펴보기 (0) | 2024.07.18 |
플러터에서 Image Picker 패키지 사용법 (0) | 2024.07.18 |