[flutter] 플러터 앱의 웹뷰 (WebView) 사용하기

플러터(Flutter)는 구글에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동작하는 앱을 빠르고 쉽게 개발할 수 있습니다. 플러터는 다양한 기능을 제공하는데, 그 중 하나인 웹뷰(WebView)를 사용하여 앱에 웹 콘텐츠를 통합할 수 있습니다.

웹뷰 (WebView) 란?

웹뷰 (WebView)는 앱 내에서 웹 사이트나 웹 콘텐츠를 로드하고 표시하는 기능을 제공합니다. 이를 통해 앱과 웹을 통합하여 풍부한 콘텐츠를 제공하거나 웹 기반의 서비스를 제공할 수 있습니다.

플러터에서 웹뷰 (WebView) 사용하기

플러터에서는 webview_flutter 패키지를 통해 웹뷰 (WebView)를 사용할 수 있습니다. 이 패키지는 플러그인 형태로 제공되며, 쉽게 웹뷰를 통합할 수 있습니다.

먼저, pubspec.yaml 파일에 webview_flutter 패키지를 추가합니다.

dependencies:
  webview_flutter: ^3.0.0

그리고 플러터 앱의 코드에서 웹뷰를 사용할 화면을 구성합니다. 예를 들어, WebViewScreen 이라는 화면을 생성한다고 가정해봅시다.

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

class WebViewScreen extends StatelessWidget {
  final String url;

  WebViewScreen({required this.url});

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

위의 코드에서는 webview_flutter 패키지의 WebView 위젯을 사용하여 플러터 앱 내에서 웹뷰를 표시하는 WebViewScreen 위젯을 구성하였습니다. WebView 위젯의 initialUrl 속성을 통해 웹뷰에 표시할 웹 페이지의 URL을 지정할 수 있습니다.

이제, 해당 화면을 플러터 앱의 다른 화면에서 사용하려면 해당 화면으로 이동하는 버튼 등을 추가하면 됩니다.

FlatButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => WebViewScreen(
          url: "https://www.example.com",
        ),
      ),
    );
  },
  child: Text("웹뷰로 이동"),
),

위의 코드는 웹뷰로 이동하는 버튼을 생성하는 예시입니다. 버튼을 클릭하면 WebViewScreen 화면으로 이동하면서 지정한 URL의 웹 페이지를 로드하여 표시합니다.

이와 같이 webview_flutter 패키지를 사용하여 플러터 앱에 웹뷰를 쉽게 통합할 수 있습니다.

마무리

플러터의 webview_flutter 패키지를 사용하면 플러터 앱에 웹뷰를 손쉽게 통합할 수 있습니다. 웹뷰를 통해 다양한 웹 콘텐츠를 제공하거나 플러터 앱과 웹 서비스를 연결하여 풍부한 사용자 경험을 제공할 수 있습니다.