flutter에서 webview 사용하기 (webview_flutter 라이브러리 사용)

WebView

웹뷰(webview)는 네이티브 앱에서 웹 컨텐츠를 띄우기 위해 사용하는 기술입니다. 예시를 들면, 모바일 앱 내에서 결제를 진행할 때,
결제 창을 별도의 브라우저를 띄울 필요 없이 앱 내부에서 바로 웹 화면을 띄울 수 있습니다.

 

위와 같은 방법으로도 사용할 수 있지만, 스타트 업과 같이 작은 규모의 회사에서는 안드로이드와 iOS 개발, 2개 플랫폼에 대해 모두 개발하기에 리소스가 많이 들기 때문에 웹 개발을 한 뒤 네이티브 앱에 웹 뷰를 띄어서 서비스를 제공하기도 합니다.

 

Flutter에서 Webview 띄우기

flutter에서 손쉽게 웹 뷰를 사용 할 수 있도록 도와주는 라이브러리가 있습니다. 본 글에서는 flutter 개발 팀에서 만든 라이브러리인 webview_flutter 를 사용하도록 하겠습니다.

 

우선 아래 명령어를 통해 의존성을 추가합니다.

flutter pub add webview_flutter

 

webview_flutter를 사용하기 위해 android/app/build.gradle 에 minSdkVersion을 19 이상으로 설정합니다.

android {
    defaultConfig {
        minSdkVersion 19
    }
}

 

설정이 완료되었으면, WebViewWidget을 사용해서 원하는 위치에 웹 화면을 띄울 수 있습니다. WebViewWidget 위젯은 WebViewController를 필수 인자로 받습니다.

 

https://flutter.dev 를 화면에 띄어보도록 하겠습니다. 우선 아래와 같이 controller를 생성해준 뒤에 loadRequest에 화면에 보여줄 웹 사이트의 URL을 넣어줍니다.

class _VideoCardState extends State<VideoCard> {
  late WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            // Update loading bar.
          },
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          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'));
  }
  //...
}

 

이후 WebViewWidget에 방금 만든 controller를 넣어줍니다. (주의할 점은 반드시 크기를 지정해주어야 합니다)

@override
Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return SizedBox(
      width: size.width,
      height: size.height,
      child: WebViewWidget(controller: controller),
    );
}

 

전체 코드

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class VideoCard extends StatefulWidget {
  const VideoCard({Key? key}) : super(key: key);

  @override
  State<VideoCard> createState() => _VideoCardState();
}

class _VideoCardState extends State<VideoCard> {
  late WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            // Update loading bar.
          },
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          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'));
  }

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return SizedBox(
      width: size.width,
      height: size.height,
      child: WebViewWidget(controller: controller),
    );
  }
}

 

결과

웹뷰로 flutter 홈페이지를 띄움

 

Reference

• https://pub.dev/packages/webview_flutter

webview_flutter | Flutter Package