[Flutter] 웹뷰(WebView)

개요

이번 블로그 포스트에서는 webview_flutter 패키지를 사용하여 앱내에서 웹 페이지를 표시하는 방법에 대해서 알아보도록 하겠습니다.

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

이 블로그 포스트에서 소개하는 소스 코드는 아래에 링크에서 확인할 수 있습니다.

GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/packages/webview_flutter_example

Flutter 프로젝트 생성

Flutter에서 webview_flutter의 사용법을 확인하기 위해 다음 명령어를 사용하여 Flutter의 새로운 프로젝트를 생성합니다.

flutter create webview_flutter_example

webview_flutter 설치

webview_flutter을 사용하기 위해, 다음 명령어를 실행하여 webview_flutter 패키지를 설치합니다.

flutter pub add webview_flutter

이제 이렇게 설치한 webview_flutter를 사용하는 방법에 대해서 알아보도록 합시다.

Android 설정

안드로이드에서 webview_flutter를 사용하기 위해서는 minSdkVersion을 19로 설정할 필요가 있습니다. ./android/app/build.gradle 파일을 열고 다음과 같이 수정합니다

android {
    defaultConfig {
        minSdkVersion 19
    }
}

사용법

webview_flutter의 사용법을 확인하기 위해 ./lib/main.dart 파일을 열고 다음과 같이 수정합니다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
...
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const WebView(
      initialUrl: 'https://deku.posstree.com/en/',
      javascriptMode: JavascriptMode.unrestricted,
    );
  }
}

이 코드를 실행하면 다음과 같은 화면이 표시되는 것을 확인할 수 있습니다.

SafeArea

예제 코드를 실행해 보면, 상단의 상태바와 하단의 홈바 밑으로 웹 페이지가 표시되는 것을 확인할 수 있습니다. SafeArea 위젯을 사용하면 웹 페이지를 상태바와 홈바와 곁치지 않도록 표시할 수 있습니다. 다시 ./lib/main.dart 파일을 열고 다음과 같이 수정합니다.

...
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: 'https://deku.posstree.com/en/',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

이를 실행하면 다음과 같이 웹 페이지가 잘 표시되는 것을 확인할 수 있습니다.

gestureNavigationEnabled

앱이나 웹에서 이전 페이지로 되돌아갈 때, 스와이프를 사용합니다. 이와 같은 기능을 활성화하기 위해서는 gestureNavigationEnabled 속성을 사용해야 합니다. 다시 ./lib/main.dart 파일을 열고 다음과 같이 수정합니다.

...
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: 'https://deku.posstree.com/en/',
          javascriptMode: JavascriptMode.unrestricted,
          gestureNavigationEnabled: true,
        ),
      ),
    );
  }
}

이제 앱을 다시 실행하고, 다른 페이지로 이동한 다음, 스와이프를 하면 다음과 같이 이전 페이지로 되돌아갈 수 있습니다.

userAgent

웹 페이지에서 구글 로그인을 사용하는 경우, 다음과 같이 403: disallowed_useragent 에러가 발생합니다.

이를 해결하기 위해서는 WebView에 userAgent를 설정할 필요가 있습니다. ./lib/main.dart 파일을 열고 다음과 같이 수정합니다.

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: 'https://deku.posstree.com/en/',
          javascriptMode: JavascriptMode.unrestricted,
          gestureNavigationEnabled: true,
          userAgent: "random",
        ),
      ),
    );
  }
}