플러터(Flutter) 네이티브앱과 Web에서 웹뷰 처리하기

안녕하세요.

개발아빠입니다.

 

이전 포스팅에서 안드로이드, iOS에 웹뷰를 붙이고, 이걸 웹으로 띄워봤을때

빨간(?) 화면이 나오면서 실행이 안된거를 다들 기억하시나요? 

 

혹시 안보고 오셨다면 아래를 방문해주고 와주세요~ 

 

플러터(Flutter) WebView 사용 및 History 제어 기능 추가

오늘은 이 부분을 처리하는 방법에 대해서 포스팅 해보려고 합니다. 

 

어쩌면 웹에다가 웹뷰를 넣는다는 말 자체가 이상 할수 도있고 해서 

그렇게 넣는 일 자체가 없기 때문에 라이브러리에서 웹은 지원은 안하고 있는거 같습니다~

생각해보니, 그거 자체가 조금 이상한 말이라고 생각도 들고요~

 

내가 웹인데 웹뷰를 넣으면 나는 무엇인가?

 

아무튼, 그렇다 하더라도 원소스로 다양한 플랫폼을 지원하는 측면에서는

웹에서는 처리를 해줘야하지 않을까 싶긴해서 

제가 처리한 Tip을 간단하게 공유 드리는 겁니다~ 

 

방법은 한줄로 정리하자면, 웹을 경우에는 해당 URL을 호출 시켜줘서 웹에서 다른 주소로 이동하는 거라고 보시면 될꺼같습니다.

 

먼저 pubspec.yaml에 url_launcher를 추가해줍니다. 

url_launcher: ^5.7.2

참고로 url_laucher는 아마 Flutter개발에 있어서 필수적인 라이브러리로 

http:// url과 더불어 전화(tel), 메일(mailto) 등의 다양한 스키마들이 동작하게 해주는 라이브러리입니다.

 

아이디어는 웹을 경우에만 (kIsWeb == true) url을 실행하는 함수를 타게 하는 겁니다. 

  void goWebView(String url) async {
    if (kIsWeb) {
      if (await canLaunch(url)) {
        await launch(url);
      }
    }
  }

이렇게 메소드를 만들어주신 다음에, 

입장하는 페이지에 추가해줍니다.

@override
void initState() {
  super.initState();

  goWebView(widget.url);
}
  

이렇게 추가해주면,

기존에 네이티브에서도 잘 동작을 하고 

 

웹에서도 새창이 뜨면서 보여주려고 하는 화면이 잘 보입니다.

해당 방법이 아주 만족스러운 방법은 아니지만,

개인적으로 하는 사이드 프로젝트에서 '개인정보정보보호 안내' 화면을 띄울때 

 

네이티브는 웹뷰를 사용하는 페이지를 만들고, 

웹은 아래 방법으로 분기를 해주니, 크게 이질감없이 처리를 할 수 있었습니다.

static void goWebView(context, String title, String url) async {
    if (kIsWeb) {
      if (await canLaunch(url)) {
        await launch(url);
      }
    } else {
      Navigator.of(context).pushNamed(FluroRouter.web, arguments: {"title" : title, "url" : url});
    }
  }

아마도 뭔가 더 깔끔한 방법이 있을꺼같다는 생각이 들지만,

이러한 아이디어도 한번 봐주시며,

혹시나 더 좋은 방법이 있으시다면 댓글로 알려주시면 감사드리겠습니다.

 

네 오늘 포스팅은 여기까지 입니다.

오늘도 즐푸하세요!