[플러터] 웹뷰(webview) 구현하기

플러터(Flutter)에서 웹뷰(WebView)를 사용하는 방법입니다.

1. 프로젝트 생성

먼저 새 플러터 프로젝트를 생성한다. 터미널에서 아래 명령어를 실행합니다:

flutter create my_webview
cd my_webview

2. 패키지 추가

그 다음, WebView Flutter 플러그인을 종속 항목으로 추가해야 한다. 패키지를 추가해야 WebView 기능을 사용할 수 있다.

프로젝트 폴더 위치에서 다음 명령어를 실행한다.

$ flutter pub add webview_flutter

pubspec을 통해 패키지를 설치할 수도 있다. pubspec.yaml 파일을 열고 다음 내용을 dependencies 섹션에 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.0.0

그 다음 아래 명령어를 실행한다.

$ flutter pub get

3. Android 설정

Android에서 WebView를 사용하기 위해서는 몇 가지 권한과 설정이 필요하다.

3.1. 인터넷 권한 설정

ndroid/app/src/main/AndroidManifest.xml 파일을 열고 <manifest> 태그 안에 다음 권한을 추가한다:

<uses-permission android:name="android.permission.INTERNET"/>

이 설정은 웹 콘텐츠를 로드할 때 인터넷에 연결할 수 있도록 해줍니다.

3.2 Android minSDK 구성

Android에서 webview_flutter 플러그인을 사용하려면 사용하려는 Android 플랫폼 뷰에 따라 minSDK를 19 또는 20으로 설정해야 한다.

다음과 같이 android/app/build.gradle 파일을 수정한다.

// android/app/build.gradle
defaultConfig {
    applicationId "com.example.my_webview"
    minSdkVersion 20        // 이 부분 수정
    targetSdkVersion 30
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

4. Flutter 앱에 WebView 위젯 추가

이 단계에서는 WebView를 애플리케이션에 추가한다. WebView는 네이티브 뷰를 호스팅하며, 앱 개발자는 앱에서 이러한 네이티브 뷰를 호스팅하는 방법을 선택할 수 있다.

Android에서는 가상 디스플레이(현재 Android의 기본)와 하이브리드 컴포지션 중에서 선택할 수 있다. 그러나 iOS는 항상 하이브리드 컴포지션을 사용한다.

가상 디스플레이와 하이브리드 컴포지션의 차이점에 관한 자세한 내용은 플랫폼 뷰를 사용하여 Flutter 앱에서 네이티브 Android 및 iOS 뷰 호스팅에 관한 문서를 참조하세요.

lib/main.dart의 내용을 다음으로 바꾼다.

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

void main() {
  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State createState() => _WebViewAppState();
}

class _WebViewAppState extends State {

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(Uri.parse('https://www.your-website.com'))

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: const WebViewWidget(
        controller: controller,
      ),
    );
  }
}

iOS 또는 Android에서 실행하면 WebView가 기기의 풀 블리드 브라우저 창으로 표시된다. 즉, 브라우저에서 테두리나 여백 없이 전체 화면으로 브라우저가 표시된다.

그리고 스크롤하면 약간 이상해 보이는 페이지 부분을 확인할 수 있다. 이는 현재 자바스크립트가 사용 중지되었고 flutter.dev를 렌더링하려면 자바스크립트가 필요하기 때문이다.

앱 실행

iOS 또는 Android에서 Flutter 앱을 실행하여 WebView가 flutter.dev 웹사이트를 표시하는지 확인한다.

$ flutter run

적절한 시뮬레이터 또는 에뮬레이터가 실행되거나 실제 기기가 연결되어 있다면 다음과 같은 내용이 표시된다.