[flutter] 플러터(Flutter)에서 웹뷰(WebView) 사용하기

플러터(Flutter)는 구글에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크로, 네이티브 앱과 유사한 성능과 UI를 제공합니다. 웹뷰(WebView)는 플러터에서 웹 콘텐츠를 표시하는 데 사용되며, 예를 들어 웹사이트를 앱 내에서 로드하거나 웹 기반의 기능을 통합할 수 있습니다. 이번 글에서는 플러터에서 웹뷰를 사용하는 방법에 대해 알아보겠습니다.

1. webview_flutter 패키지 추가하기

웹뷰를 사용하기 위해서는 webview_flutter 패키지를 먼저 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가해주세요.

dependencies:
  webview_flutter: ^0.3.10

2. 웹뷰 위젯 생성하기

웹뷰를 사용하기 위해 WebView() 위젯을 생성해야 합니다. 아래 예제는 플러터 앱의 화면에 웹뷰를 표시하는 간단한 예제입니다.

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

class WebViewScreen extends StatefulWidget {
  @override
  _WebViewScreenState createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  final String url = 'https://www.example.com';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('웹뷰'),
      ),
      body: WebView(
        initialUrl: url,
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

3. 웹뷰에 웹 사이트 로드하기

앞서 작성한 WebView() 위젯의 initialUrl 속성에 로드할 웹사이트의 URL을 지정해주세요. 이때, WebView() 위젯의 javascriptMode 속성을 JavascriptMode.unrestricted로 설정하면 자바스크립트를 사용할 수 있습니다.

4. 앱 런칭하기

앱을 빌드하고 실행하면, 웹뷰 위젯에 지정한 URL의 웹사이트가 로드됩니다. 사용자는 앱 내에서 해당 웹사이트를 확인하고 웹 기반의 기능을 이용할 수 있게 됩니다.

5. 참고 자료