[Flutter] 플러터 웹뷰 사용하기 (2)

 

 

플러터 웹뷰 구현하기 !

 

 

지난번에 사용한 라이브러리는 rtc가 허용이 안되어서 마이크를 사용해야하는데 그 기능이 동작하지 않았다.

 

그래서 다른 웹뷰 라이브러리를 사용했는데, 이건 

 

flutter_inappwebview: ^6.0.0

 

 

이다. 

 

1. 설치

flutter pub add flutter_inappwebview

 

 

설치하면

dependencies:
  flutter_inappwebview: ^6.0.0

 

6.0.0 버전이 설치 된다.

 

 

2. import

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

 

 

 

 

728x90

 

 

 

 

 

3. 사용

 @override
  Widget build(BuildContext context) {
    return PopScope(
      canPop: false,
      onPopInvoked: (didPop) async {
        await webViewController.goBack();
      },
      child: Scaffold(
        body: Container(
          color: Colors.red[400],
          child: SafeArea(
            child: InAppWebView(
              onPermissionRequest: (controller, permissionRequest) async {
                return PermissionResponse(
                    resources: permissionRequest.resources,
                    action: PermissionResponseAction.GRANT);
              },
              onJsAlert: (controller, jsAlertRequest) async {
                await showAlert(context, jsAlertRequest);
                return JsAlertResponse(handledByClient: true);
              },
              onJsConfirm: (controller, jsConfirmRequest) async {
                final userConfirmed =
                    await showConfirm(context, jsConfirmRequest);
                return JsConfirmResponse(
                  handledByClient: true,
                  action: userConfirmed
                      ? JsConfirmResponseAction.CONFIRM
                      : JsConfirmResponseAction.CANCEL,
                );
              },
              initialUrlRequest: URLRequest(url: WebUri.uri(Uri.parse(url))),
              onWebViewCreated: (controller) async {
                webViewController = controller;
                InAppWebViewSettings? settings =
                    await webViewController.getSettings();
                settings?.userAgent = "${settings.userAgent} Flutter";
                webViewController.setSettings(settings: settings!);
              },
            ),
          ),
        ),
      ),
    );
  }

 

 

userAgent를 수정해서 Flutter라는 키우드를 넣었다.

지난번 라이브러리와 마찬가지로 Alert와 Confirm을 웹이 아닌 앱에서 실행되도록 해주었다.