flutter 앱에서 웹뷰 띄우기 webview_flutter 플러그인

목표

플러터 APP에서 webview_flutter 플러그인을 사용해서 최소한의 코드로 리액트 웹페이지를 띄운다.

 

플러터 프로젝트 준비

https://hanaindec.tistory.com/entry/flutter-%EC%9B%B9%EB%B7%B0#2.%20%ED%94%8C%EB%9F%AC%ED%84%B0%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EC%83%9D%EC%84%B1-1

flutter 설치 및 개발 환경 설정 - VS Code, Android Studio 환경 (Mac silicon)

 

 

webview_flutter 플러그인 설치

webview_flutter 플러그인 설치

 

webview_flutter 패키지 공식문서에 나와있는대로 아래와 같이 설치한다.

flutter pub add webview_flutter

 

 

웹뷰플러터 패키지가 설치되면 아래와같이 `pubspec.yaml` 파일 dependencies에 패키지가 추가된다.

 



프로젝트에 WebView 위젯 추가

webview_flutter 공식문서 > readme 에 나와있는 사용법만 보고는 한눈에 파악하기가 힘들었다;; 

 

웹뷰를 띄우는 부분은 아래의 구글 codelabs 공식문서를 참고했다.

https://codelabs.developers.google.com/codelabs/flutter-webview#3

Flutter 앱에 WebView 추가  |  Google Codelabs

 

lib/main.dart 

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

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

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

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

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://flutter.dev'),
      );
  }

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

 

웹뷰 컨트롤러 `WebViewController`를 생성하고, 그 컨트롤러를 웹뷰 위젯인 `WebViewWidget`에 전달한다. 

 

그러면 플러터 공식홈페이지가 앱 내부의 웹뷰로 잘 뜬다!

 

 

리액트 페이지 띄우기

그럼 이제 내가 만든 사내프로젝트 리액트 페이지를 띄워봤다. 

    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://프로젝트 배포주소')

 

근데 화면이 아~예 뜨지않았다.. 그냥 빈화면.. 

리액트로 만든 대표적인 웹사이트를 한번 띄워보자

 

인스타그램 - 로고만 뜨고 안넘어감

에어비앤비 - 로딩 전 skeleton 화면만 표시됨

 

문제는 JavaScriptMode 였다.

웹뷰 내에서 JavaScript를 허용할지 컨트롤 하기위해서 컨트롤러에 setJavaScriptMode 메서드를 추가할 수 있다.

 

    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted) //<-- 추가

 

해당 메서드를 추가해주면 이제 자바스크립트로 작성한 웹페이지도 잘 뜬다! 

 

 

추가 이슈

웹뷰 페이지가 기기 시스템 app bar를 구분하지 못하는 현상

 

그런데, Scaffold 내부의 Flutter WebView 라는 AppBar를 제거하고 난 이후 웹뷰로 띄울 경우 기기 자체의 시스템 appbar 영역을 구분하지 못하고, 웹뷰 페이지가 기기 전체영역을 덮어버리는 문제가 있었다. 

 

공식문서에서 보니 웹뷰를 띄우는 경우 디바이스의 full bleed browser window 크기로 띄운다고 하니 나한테만 생기는 버그가 아닌 원래 발생하는 현상이라고 한다. 

 

Running this on iOS or Android will show a WebView as a full bleed browser window on your device, which means that the browser is shown on your device in fullscreen without any form of border or margin. 

 

나의 경우는 웹뷰 페이지 영역이 시스템 기기의 abb bar를 침범하는 해당 문제는 웹뷰인 경우에는 최상단에 padding 값을 더 주어서 해결했다. 그리하여 웹뷰 페이지는 패딩 간격 아래부터 뜨므로 시스템 app bar 아래부터 웹뷰 페이지가 화면에 띄워진다.

위와 같이 웹 프론트에서 padding을 주는경우 기기별로 달라지는 화면을 대응하지 못하므로 좋은 해결법은 아니다. 모바일 개발자한테 얘기해서 모바일쪽에서 시스템 자체의 system appbar가 가려지지않게 코드를 수정해달라고 하면 된다. 모바일에서  SafeArea 라는 위젯으로 감싸고 나면 깔끔히 해결된다.

 

References 

https://luvris2.tistory.com/713

Flutter - WebView - 웹 뷰를 이용하여 웹 페이지 표시하기 (webview_flutter 4.0 이상)