[Flutter] webview_flutter를 활용한 webview 표현하기

webview_flutter를 사용하는것을 간단하게 정리하겠다. 

 

Flutter에서 변경이 있을 때마다 일일히 업데이트해서 나가는 것이 싫어서 

 

webView를 도입해서 필요한 부분은 앱 배포없이 업데이트 하고 싶어서 찾아보게 되었다. 

 

 

1) webview_flutter  설치 

webview_flutter | Flutter package

 

flutter pub add webview_flutter

 

webview_flutter는 flutter 공식에서 개발하고 있는 라이브러리라서 믿고 바로 설치를 하였다. 

 

2) 기본코드 설명 (URL  사용 ) 

controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setNavigationDelegate(
    NavigationDelegate(
      onProgress: (int progress) {
        // Update loading bar.
      },
      onPageStarted: (String url) {},
      onPageFinished: (String url) {},
      onHttpError: (HttpResponseError error) {},
      onWebResourceError: (WebResourceError error) {},
      onNavigationRequest: (NavigationRequest request) {
        if (request.url.startsWith('https://www.youtube.com/')) {
          return NavigationDecision.prevent;
        }
        return NavigationDecision.navigate;
      },
    ),
  )
  ..loadRequest(Uri.parse('https://flutter.dev'));

 

위 페이지에 들어 가면 webview_flutter 설명에 나와있는 코드다. 코드를 간단하게 설명하자면

1. WebViewController() :  WebViewController 생성
2. setJavaScriptMode(JavaScriptMode.unrestricted) : 웹 페이지에서 자바스크립트를 제한 없이 실행할 수 있도록 허용
3. setNavigationDelegate() : 웹 페이지의 페이지 로드, 오류처리, 특정 요청 차단 등을 처리하기 위한 델리게이트 설정
4. loadRequest : 메서드를 사용하여 URL을 로드 

3) HTML data를 직접 받는 경우 

필자는 URL을 받는 것이 아닌 html data를 서버에서 내려 받으려고 했다. 

final webViewController = WebViewController();
webViewController.loadHtmlString(noticePopup.noticePopupHtml!);

if (await _noticePopupPreferences.shouldShowNoticePopup()) {
Get.dialog(
  barrierDismissible: false,
  NoticePopupDialog(
    dismissedToday: _noticePopupPreferences.dismissForToday,
    webViewController: webViewController,
  ),
);
}

1. loadHtmlString을 이용하여 html data를 웹뷰로 보여 줄 수 있다. 
2. Get.dialog : dialog를 띄우기 위함 

 

4) 앱화면에 띄우기 

 Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stack(children: [
              SizedBox(
                width: 280,
                height: 340,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: WebViewWidget(controller: webViewController),
                ),
              ),
              Positioned(
                left: 244,
                top: 16,
                child: GestureDetector(
                    child: SvgPicture.asset(
                      'assets/icons/x-close.svg',
                    ),
                    onTap: () => Get.back()),
              )
            ]),
            Container(
              margin: const EdgeInsets.only(top: 12),
              child: GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  dismissedToday;
                  Get.back();
                },
                child: const Text(
                  '오늘 하루 보지 않기',
                  style: TextStyle(
                    fontSize: 13,
                    color: AppColors.white01,
                    fontWeight: FontWeight.w400,
                    decoration: TextDecoration.underline,
                    decorationColor: AppColors.white01,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

1. WebViewWidget : 이부분이 핵심이다. 3번에서 만들었던, controller를 이 부분에 넣어주기만 하면 끝

 

5) 결과화면 

개발 중이여서 간단한 서버에서 HTML 보낸 결과물이 잘 뜨는 것을 확인 할 수 있다.