[웹툰 앱 만들기] url_launcher 이용해서 특정 url 창 띄우기

다음 동영상처럼 특정 에피소드 Container를 클릭했을 때 창이 열리도록 url_launcher를 사용했다.

 

방법은 아래와 같다.

 

1. url_launcher install

https://pub.dev/packages/url_launcher

url_launcher | Flutter Package

이곳에서 지시 사항대로 install을 진행한다. 진행 중에 cocoapods가 없다며 에러가 나서 아래 포스트대로 실행했다.

https://soaringwave.tistory.com/221

갑자기 CocoaPods not installed.

 

Readme의 configuration을 읽으면 ios의 경우 특정 명령어를 작성하라고 한다. 이 앱에서 사용하려는 것은 특정 http 링크이니 아래와 같이 작성하면 된다.

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>http</string>
</array>

 

 

2. episode widget extract하기

이 과정을 필수 과정이 아니지만, 에피소드들이 평균 20개 이상으로 많기도 하고 개별 Container에 GestureDetector를 적용한 채로 파일을 분리했다. widget를 생성할 때는 url에 필요한 webtoon의 아이디와 episode의 정보가 필요하다.

https://github.com/soaringwave/Flutter-studying/commit/f8cdbf7035278b0dd3327afb4fe34e1c8c966a0c

Extract Episode widget · soaringwave/Flutter-studying@f8cdbf7

 

 

3. GestureDetector와 ontap 함수 설정하기

사용자가 특정 에피소드를 보고자 할 때 클릭하게 되는 Container를 GestureDetector로 감싸고 클릭했을 때 실행될 함수인 ontap을 설정하면 된다.

void onEpisodeTap() async {
    final url = Uri.parse(
        'https://comic.naver.com/webtoon/detail?titleId=$webtoonId&no=${episode.id}&week=thu');
    launchUrl(url);
  }

에피소드가 클릭되면 webtoonId와 episode의 id를 이용해 특정 url 창을 띄우도록 launchUrl()을 사용했다. 

https://github.com/soaringwave/Flutter-studying/commit/5b92674ce90fc7f1988aebaef09881fbd477fb21

Move to url using Url launcher and gesture detector · soaringwave/Flutter-studying@5b92674

---

https://nomadcoders.co/flutter-for-beginners/lectures/4175