[Flutter] WebView 패키지 사용 (Notion 페이지 접근)

WebView란 앱 내에서 웹브라우저 컴포넌트를 사용해 웹페이지를 띄우는 것을 말한다.

 

WebView를 사용하기 위해 webview_flutter 패키지를 활용해보자.

 

1. 먼저 터미널 창에 아래 명령어를 입력하여 패키지를 설치한다. (참고: https://pub.dev/packages/webview_flutter/install)

최신버전 설치 시 호환성 오류가 많이 발생하여 본 게시글에서는 특정버전(v3.0.4)을 사용한다.

$ flutter pub add webview_flutter:^3.0.4

설치 후 pubspec.yaml 파일에 아래와 같이 보인다면 정상적으로 설치에 성공한 것이다.

/* pubspec.yaml */
...
dependencies:
    ...
    webview_flutter: ^3.0.4

2. android/app/ 위치의 build.gradle 파일을 열어 아래 코드 수정

/* build.gradle */
...
android {
    ...
    defaultConfig {
        ...
        //flutter.minSdkVersion 을 19 로 수정
        minSdkVersion 19
    }
}

3. 아래 코드처럼  WebView 위젯을 생성하여 url을 클릭했을 때 웹페이지를 띄울 수 있다.

import 'package:webview_flutter/webview_flutter.dart';

...
    GestureDetector(
        onTap: () {
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => WebViewPage(url: "https://~"),
                ),
            );
        },
        child: Text( "https://~" ),
    ),
...

class WebViewPage Extens StatelessWidget {
    WebViewPage({super.key, required this.url});
    String url;
    
    @voerride
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(),
            body: WebView(
                initialUrl: url,
            ),
        );
    }
}

 

+ 이슈)

위 코드를 활용하여 Github 주소와 Notion 페이지 주소를 클릭했을 때 웹페이지를 띄우는 코드를 작성하던 중, github 주소는 웹페이지로 잘 연결이 되는 반면 Notion 페이지 주소를 클릭했을 때는 흰 페이지에서 무한로딩이 되는 문제가 발생했다.

 

- 시도 및 해결

먼저 Notion 페이지 공유 권한을 확인했고 정상적으로 공유 허용으로 설정되어 있는 것을 확인했다.

여러 검색을 해보니, Notion은 Javascript를 활발하게 사용하는 웹어플리케이션이기 때문에 WebView에서 Javascript 실행이 제한되는 경우 페이지 로드에 문제가 생길 수 있다고 한다.

곧바로 아래와 같이 Javascript 실행을 허용하는 코드를 추가했고, 정상적으로 Notion 페이지를 웹페이지에 띄울 수 있었다.

class WebViewPage extends StatelessWidget {
...
    body: WebView(
        initialUrl: url,
        javascriptMode: JavascriptMode.unrestricted, //javascript 실행 허용
    ),
}