20221006 메타버스 3. Flutter WebView

Github : https://github.com/cjk09083/meta

 

지난 포스트에 이어

 

메타버스 게임 연동을 위해 블루투스 페어링이 완료되면 WebView로 게더타운 페이지를 띄우도록 만들었다.

 

먼저 WebView는 다음 라이브러리를 사용했다.

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

flutter pub add webview_flutter

 

이후 pubspec.yaml에 추가된 상태

dependencies:
  flutter:
    sdk: flutter
    
  flutter_blue_plus: ^1.3.0
  cupertino_icons: ^1.0.2
  webview_flutter: ^3.0.4

 

링크의 Readme에 따라 아래 설정을 추가해준다.

 

set the correct minSdkVersion in android/app/build.gradle

android {
    defaultConfig {
        minSdkVersion 19
    }
}

 

이후 Flutter 내에 다음과 같이 게더타운 링크와 연결된 webView class를 만들어 준다.

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

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

  @override
  Widget build(BuildContext context) {
    return const WebView(
      initialUrl: 'https://app.gather.town/app/00000000000/home',
      javascriptMode: JavascriptMode.unrestricted,
      gestureNavigationEnabled: true,
    );
  }
}

 

이후 bluetooth가 페어링(Connected)되면 WebView화면으로 넘어가도록 만들어준다.

 

테스트 결과 webview_flutter 에서는 새창열기(window.open)가 되지않아 게더타운 google sign in 에서 흰색 화면만 나타났다.

이를 해결 위해 webview 라이브러리를 InAppWebView 라이브러리로 교체하였다.

 

마찬가지로 다음 명령어로 라이브러리를 설치하였다.

 $ flutter pub add flutter_inappwebview

 

에러 1) 예제 실행 도중      [!] Automatically assigning platform `iOS` with version `11.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`. 에러가 발생

=> PodFile 에 주석으로 되어있는 platform :ios, '11.0' 를  주석 해제 하였다.

 

에러2) Searching for inspections failed: undefined method `map' for nil:NilClass 라는 에러가 추가로 발생

=>

#1 터미널에서 입력
sudo arch -x86_64 gem install ffi
#2 ios/ 위치에서 입력
arch -x86_64 pod install

를 통해 해결.

 

이후 페이지 전환 대신 블루투스가 연결되면

await widget.browser.open(
    url: Uri.parse("https://app.gather.town/app/0000000/home"),
    options: ChromeSafariBrowserClassOptions(
        android: AndroidChromeCustomTabsOptions(
            shareState: CustomTabsShareState.SHARE_STATE_OFF),
        ios: IOSSafariOptions(barCollapsingEnabled: true)));

로 연결되도록 변경

 

성공적으로 게더타운에 접속한 모습