[.3] 플러터-Flutter WebView 를 이용한 플로터 하이브리드 앱 프로젝트

Flutter WebView 하이브리드 앱

개발중이던 반응형 웹 사이트를 안드로이드 앱에서 서비스해보기 위해
플로터 웹뷰(WebView)를 이용한 하이브리드 앱을 만들어 보려고 합니다.

예제 코드는 구글(codelabs.developers.google.com, docs.flutter.dev)가이드를
스터디하며 진행된 결과 입니다.

---

1. Create Flutter New Project

안드로이드 스튜디오 New Project 에서 빈 프로젝트를 생성 합니다.
프로젝트 생성시 추가해야할 플로터 웹뷰(WebView) 관련 옵션은 없습니다.

프로젝트명 + Kotlin + Swift -> Finish

프로젝트 생성 후 main.dart 까지 확인~

---

2-1. Flutter WebView  플러그인 종속 추가

안드로이드 스튜디오 하단 [Terminal] 텝을 선택하고
프로젝트폴더 Root 에서 다음 명령을 수행 합니다.

프로젝트폴더Root > flutter pub add webview_flutter

*. pubspec.yaml에, 이미 WebView 플로그인 종속코드가 등록되어 있으면 실행시 오류가 날 수 있습니다.

프로젝트 폴더에서 실행

Changed 5 dependencies!

2-2. WebView 플러그인 종속 추가 확인

프로젝트 폴더에 "pubspec.yaml" 파일을 열어
webview_flutter 플러그인의 종속 항목을 확인 합니다.

webview_flutter: ^3.0.4

플로터는 버접 업데이트가 어마어마한 속도로 증가되니 참고하세요 ... 그래서 더 불안 ㅠㅠ

[2022-12-17 Update]
webview_flutter Pakage 가 "webview_flutter: ^4.0.0" 으로 상향 되었습니다.
이후 블러그된 코드와 호환되지 않으니
아래 코드로 진행 하시려면  "webview_flutter: ^3.0.4" 로 적용하시기 바랍니다.

방법은)
pubspec.yaml > webview_flutter: ^3.0.4 로 수정 후
터미널에서 > flutter pub get <실행>

플로터 패키지 정보는 아래 링크 참조
https://pub.dev/packages/webview_flutter/install

webview_flutter | Flutter Package

---

3. Android minSDK 와 targetSDK 구성

프로젝트폴더 "android/app/build.gradle" 파일 오픈
minSdkVersion 과 targetSdkVersion 을 설정해 줍니다.
본인의 개발 환경에과 Flutter 버전마다 다를 수 있습니다.

minSdkVersion 21 / targetSdkVersion 33 으로 설정 했습니다.
추가로 compileSdkVersion 33 으로 설정 했습니다.

---

4. main.dart 수정

codelabs.developers.google.com 사이트 예제코드로 테스트 진행 합니다.

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({Key? key}) : super(key: key);

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

class _WebViewAppState extends State<WebViewApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: const WebView(
        initialUrl: 'https://flutter.dev',
      ),
    );
  }
}
// ...변경

main.dart 수정 후 test/widget_test.dart 에 오류가 표시되어 test에도 동일한 class 명으로 수정 합니다.

---

5. Device Manager 에서 AVD 실행

테스트 실행을 위해 AVD 를 실행 합니다.

에디터 오른쪽 위에 Device Manager 에서 Launch this AVD 선택

Flutter Device Selection 에서 실행한 AVD 선택

AVD 실행 후 Flutter Device Selection 까지 선택 했으면 [>] 실행(Shift+F10) 합니다.
디버그로 실행 해도 되지만 용량 차이가 조금 있어서 단순 테스트는 실행으로...

main.dart 를 실행시 console 창 모습~

AVD 에 지정한 URL 웹페이지가 표시 됩니다.

---

[ # ] Failure [INSTALL_FAILED_INSUFFICIENT_STORAGE] 오류 메세지

프로젝트를 여러번 만들어 테스트 하다보면
AVD 저장공간이 부족해 나는 오류 입니다.

1) 가상 디바이스 저장공간을 늘려 줍니다.

Virtual Device -> Edit this AVD 선택

[Show Advanced Settings] 선택

Internal Storage 를 4096(1024 * 4) 정도로 확장

2) 테스트 앱(APK) 삭제

AVD 화면에서 테스트 앱을 마우스로 누르면

(X Cancel) (Uninstall) 버튼이 나옵니다.

Uninstall 로 앱을 가져가면 삭제 됩니다.

---

[ # ] net:ERR_CLEARTEXT_NOT_PERMITTED 오류 메세지

class _WebViewAppState extends State<WebViewApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: const WebView(
      	// https -> http 로 변경 후 오류 발생함
        initialUrl: 'http://....co.kr',
      ),
    );
  }
}

웹 사이트를 불러올때 기 "HTTPS" 만 허용됩니다.
AndroidManifest.xml 에서 "HTTP"  권한을 추가해 줍니다.

위치: android/app/src/main/AndroidManifest.xml 파일
<application> 에 android:usesCleartextTraffic="true" 추가

앱을 종료하고 다시 실행하면 정상적으로 호출 됩니다.

 

# 참고 사이트

https://docs.flutter.dev/

Flutter documentation

https://codelabs.developers.google.com/

Google Codelabs