Flutter WebView

WebView 개념

주로 Callback 사용

WebView(
	initialUrl : "https://blog.~"
    javascriptMode : JavaScriptMode.unrestricted


onPageFinished: (String Url){ // 웹뷰 내 페이지 로딩 후 콜백
	print(url);
}

웹뷰 위젯

• 웹뷰 : 프레임워크에 내장된 브라우저를 앱의 네이티브 컴포넌트에 임베딩.
  네이티브 컴포넌트에 비해, 속도가 느리고 애니메이션이 부자연스러운 단점.
  기존 웹사이트를 활용할 수 있다는 장점.

  initialUrl : 웹뷰 첫 실행 사이트를 String으로 제공
  javascriptMode: 웹뷰에서 JS 실행을 허용할지 여부 결정
  javascriptMode.unrestricted: 제한없이 JS 실행
  javascriptMode.disabled: JS 실행 불가
  onWebViewCreated : 웹뷰 위젯 생성 시 실행 콜백, 파라미터로 WebViewController가 주어져, 라우터 기능을 조작할 수 있음.
  onPageStarted : 웹뷰 생성 및 페이지 이동 시 웹페이지 로딩 시작하면, 실행할 콜백 함수. 매개변수로, 로딩이 시작된 URL을 제공.
  onPageFinished : 웹페이지 로딩 후, 실행. 매개변수, 로딩이 완료된 URL 제공.
  onProgress : 로딩 중일 때 지속 실행되며, 로딩 후까지 실행.
  매개변수에 int로 페이지 로딩 상태를 0부터 100 사이 숫자 제공.

Android & Native Setting

플러터 또한 네이티브 플랫폼으로 컴파일 되므로 최소한의 설정 필요.
(인터넷 권한, https 프로토콜 권한, 카메라, 갤러리, 푸쉬 등은 설정 필요)

pub 명령어

flutter pub get : pubspec.yaml 내 플러그인 설치
flutter pub add [plugin] : yaml에 플러그인 추가
flutter pub upgrade : 플러그인 모두 업데이트
flutter pub run : 프로젝트 실행

Android Setting

안드로이드 설정 파일은 android/app/src/main/AndroidManifest.xml이다.
해당 파일에서 앱에 필요한 각종 권한 설정.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.golidangil_front">
    //파일 내부 해당 부분
   <application
        android:label="golidangil_front"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        //android:usesCleartextTraffic="true"(앱은 보통 https만, http 허용 설정)

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

이 외 필요한 권한들 ("android.permission. ~")
INTERNET : 인터넷 사용권한
CAMERA: 카메라 사용권한
WRITE_EXTERNAL_STORAGE : 앱 외부에 파일을 저장할 수 있는 권한
READ_EXTERNAL_STORAGE : 앱 외부의 파일을 읽는 권한
VIBRATE : 진동 권한
ACCESS_FINE_LOCATION : GPS 및 네트워크로 현재 위치 정보 권한
ACCESS_COARSE_LOCATION : 대략적인 위치 정보 권한
ACCESS_BACKGROUND_LOCATION : 앱이 배경에 있을 때 위치 정보 권한
BILLING : 인앱 결제 권한
CALL_PHONE : 전화기 앱을 사용하지 않고 전화할 수 있는 권한
NETWORK_STATE: 네트워크 상태 권한
RECORD_AUDIO : 녹음 권한

android/app/build.gradle: 안드로이드의 빌드 툴인 그래들 설정 파일이며,
모듈 파일, 의존성이나 버전 정보 관리
android/build.gradle: 프로젝트 파일, 주로 클래스패스나 레포지토리 정보 입력

/app/build.gradle 파일
android {
    compileSdkVersion flutter.compileSdkVersion
// 앱 빌드 시 사용할 SDK 버전
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = '1.8'
    }

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.golidangil_front"
        minSdkVersion flutter.minSdkVersion 
// minSdkVersion : 안드로이드 운영 체제의 최소 SDK 버전 설정 위치
// 웹뷰 사용 시 최소 20 이상
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

주석으로 설명한 해당 부분은 플러그인을 어떤 것을 사용하느냐에 따라 수시로 변경될 수 있다.

Ios 설정

/ios/Runner/Info.plist 해당 파일은 iOS의 런타임 설정 파일.

/ios/Runner/Info.plist 파일 내부 추가

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
...

<key>NsAppTransportSecurity</key>
<dict>
	<key>NsAllowLocalNetworking</key>
    <true/>
    <key>NsAllowsArbitraryLoadsInWebContent</key>
    <true/>
</dict>

이 외 필요한 권한들
<key>NS~</key>
<string>권한 설명</string> 이와 같이 추가
NSCalendarsUsageDescription : 달력 사용 권한
NSCameraUsageDescription : 카메라 사용 권한
NSContactsUsageDescription : 연락처 사용 권한
NSLocationUsageDescription : 위치 정보
NSPhotoLibraryUsageDescription : 갤러리 접근 권한
NSFaceIDUsageDescription : FaceID 접근
NSMicrophoneUsageDescription : 마이크 사용 권한
NSMotionUsageDescription : Accelerometer 사용 권한
NSSiriUsageDescription : Siri 사용 권한

나머지 키는 애플 사이트에..

Home 생성

lib > screen > home_screen.dart
import는 프로젝트 내에선 import "package:프로젝트이름/lib 폴더 내 위치/파일명
		플러그인은 "package:플러그인 이름 / 플러그인 이름.dart

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);
// 생성자 앞 const는 재활용 용도로, 하드웨어 리소스 절약.
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Text("HOME"),
    )
  }
}

웹뷰 예시

class HomeScreen extends StatelessWidget {
  WebViewController? controller;
  
  HomeScreen({Key? key}) : super(key: key);
  //const 사용은 클래스 내부의 값이 모두 변경될 수 없는 값이어야 함.
  //controller가 const가 아니기 때문에
  
  Widget build(BuildContext context){
    return Scaffold(
      appBar : AppBar(
      	backgroundColor: ...,
        title: ...,
        centerTitle: true,
        
      //AppBar의 action 매개변수
      actions: [
      	IconButton(
        	onPressed: (){
            	if(controller !== null){
                	controller!.loadUrl("...")
                }
           },
           icon:Icon(Icons.home,),
        )
      ]
      )
      
      body: WebView(
      	onWebViewCreated: (WebViewController controller){
        	this.controller = controller; 
            // 위젯에 컨트롤러 저장 
			// 이 값을 위젯의 controller 변수에 저장하면 어디서든 웹뷰 제어
        }
      )
    )
  }
}

onWebViewCreated() 는 웹뷰 생성 시, 단 한 번만 실행.(핫 리로드로 재실행이 되지 않음)