Flutter - 6.16 Url Launcher

이번에는 Flutter에서 브라우저를 여는 방버에 대해서 공부해볼 것이다.
(url_launcher를 다운받자: https://pub.dev/packages/url_launcher)

그리고, pub.dev에 있는 Configuration을 참조하면 된다.
2024.12.10기준으로 보자면...

1. iOS의 경우

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>sms</string>
  <string>tel</string>
</array>

이 친구를 Info.plist 파일로 복사 붙여넣기 하면 된다.
일반적으로, 파일 위치는 다음과 같다: ./ios/Runner/Info.plist

2. Android의 경우

<!-- Provide required visibility configuration for API level 30 and above -->
<queries>
  <!-- If your app checks for SMS support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="sms" />
  </intent>
  <!-- If your app checks for call support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="tel" />
  </intent>
  <!-- If your application checks for inAppBrowserView launch mode support -->
  <intent>
    <action android:name="android.support.customtabs.action.CustomTabsService" />
  </intent>
</queries>

이 친구를 AndroidManifest.xml 파일에 추가하면 된다.
일반적으로, 파일 위치는 다음과 같다: ./android/app/src/main/AndroidManifest.xml

여기에서 잘 보면 iOS, Android에 공통적으로 "tel", "sms'가 적혀있는데, 이는 url launcher가 인터넷 url 뿐만 아니라, 다른 url도 열기 때문이다.
사용하고 싶은 것을 직접 추가하면 되는데, 지원되는 것은 pub.dev의 url_launcher 홈페이지에 가서

Supported URL schemes

이 부분은 직접 확인해보자.
우리는 url 링크를 브라우저로 열고 싶기 때문에 https를 적어주자.
그 이후에는 아예 debug를 stop한 후에 다시 실행하자. (시스템 파일을 건드렸다고 생각하면 된다.)

나 같은 경우에는, 바로 다음과 같은 에러가 발생했다:

Error: Building with plugins requires symlink support.

 

Please enable Developer Mode in your system settings. Run

start ms-settings:developers

to open settings.

이 것은 윈도우 환경에서 나타나는 문제인 것으로 보이는데, 윈도우 11의 경우에는 다음과 같이 하면 된다:
""" 설정 $\rightarrow$ 시스템 $\rightarrow$ 개발자용 $\rightarrow$ 개발자 모드 활성화 """
또는, 저 에러를 읽어보면 알 수 있는데, 다음의 명령어를 터미널에 입력하면 설정이 열리는데, 거기에서 개발자 모드를 활성화 하면 된다 : """ start ms-settings:developers """

일단, 에피소드 위젯이 점점 커지니까, 분리하도록 하자:

for (var episode in snapshot.data!)
  Episode(episode: episode, webtoonId: widget.id),

이렇게 Extract widget을 이용해서 'Episode'라는 이름의 위젯을 만들었고, 'widgets' 폴더에 'episode_widget.dart'파일을 만들어서 여기에서 작업하였다.

url을 불러올 때에는 두 방법이 있으며, 두 방법은 다음과 같다:

  onButtonTap() async {
    final url = Uri.parse("https://comic.naver.com/webtoon/detail?titleId=$webtoonId&no=${episode.id}&week=tue");
    await launchUrl(url);
  }

  onButtonTap() async {
    await launchUrlString(
        "https://comic.naver.com/webtoon/detail?titleId=$webtoonId&no=${episode.id}&week=tue");
  }

이렇게 해서 webtoonId와 episode.id를 이용해서 네이버 웹툰 페이지로 바로 연결되도록 하였다.

그리고, 탭 하는 것을 인식 할 때에는 GestureDetector를 이용한다는 사실을 잊지 말자.
Container를 GestureDetector로 감싸주고, onTap: onButtonTap을 이용해서 url을 열도록 만들어주자.

episode_widget.dart 전체 코드는 다음과 같다:

import 'package:flutter/material.dart';
import 'package:toonflix/models/webtoon_epsiode_model.dart';
import 'package:url_launcher/url_launcher_string.dart';

class Episode extends StatelessWidget {
  const Episode({
    super.key,
    required this.episode,
    required this.webtoonId,
  });

  final WebtoonEpisodeModel episode;
  final String webtoonId;

  onButtonTap() async {
    await launchUrlString(
        "https://comic.naver.com/webtoon/detail?titleId=$webtoonId&no=${episode.id}&week=tue");
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onButtonTap,
      child: Container(
        margin: const EdgeInsets.only(bottom: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Colors.green.shade400,
          boxShadow: [
            BoxShadow(
              blurRadius: 1,
              offset: const Offset(3, 4),
              color: Colors.black.withOpacity(0.5),
            ),
          ],
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(
            vertical: 10,
            horizontal: 20.0,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                episode.title,
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
              ),
              const Icon(
                Icons.chevron_right,
                color: Colors.white,
              ),
            ],
          ),
        ),
      ),
    );
  }
}