flutter webView 세팅 및 데이터 주고 받기

시작하기

사용할 도메인

https://www.chaam.co.kr/login

 

사용할 패키지

https://pub.dev/packages/webview_flutter

 

project 생성 및 패키지 설치

flutter create chaam_webview

dependencies에 추가

dependencies:
  webview_flutter: ^4.2.4

 

 

 

웹 뷰 띄우기

코드를 분석하기 전에 우선 빠르게 웹뷰를 띄어 보겠다.

 

controller 생성

  late final WebViewController controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setBackgroundColor(const Color(0x00000000))
    ..setNavigationDelegate(
      NavigationDelegate(
        onProgress: (int progress) {
          // Update loading bar.
        },
        onPageStarted: (String url) {},
        onPageFinished: (String url) {},
        onWebResourceError: (WebResourceError error) {},
        onNavigationRequest: (NavigationRequest request) {
          if (request.url.startsWith('https://www.youtube.com/')) {
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      ),
    )
    ..loadRequest(Uri.parse('https://www.chaam.co.kr/login'));

 

 

widget build

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }

 

스크린 샷 

 

ios는 바로 되는데  android는 추사 세팅이 필요합니다.

 

Android Platform Views (공식문서 일부분 가져옴)

This plugin uses Platform Views to embed the Android’s WebView within the Flutter app.

You should however make sure to set the correct minSdkVersion in android/app/build.gradle if it was previously lower than 19:

android {
    defaultConfig {
        minSdkVersion 19
    }
}

 

위처럼 minSdkVerison을 19로 명시해줍니다.

 

그러면 adroid도 실행 할 수 있습니다.

 

 

간단하게 보는 Nextjs => Flutter로 메세지 보내기

아래는 Nextjs 코드

	const goToSignUp = (e: React.MouseEvent<HTMLButtonElement>) => {
		e.preventDefault();
		router.push('/sign-up');

		//@ts-ignore
		chaam.postMessage('hello webview');
	};

아래는 flutter 코드

  @override
  void initState() {
    controller.addJavaScriptChannel(
      'chaam',
      onMessageReceived: (p0) {
        print('==========> ${p0.message}');
      },
    );

    super.initState();
  }

 

마우스 커서를 올려보면 어떻게 통신하는지 나와있습니다.

Nextjs에서는 타입에러를 막기위해 '//@ts-ignor' 명시

 

 

간단하게 보는 Flutter => Nextjs로 메세지 보내기

flutter 코드

  @override
  void initState() {
    Future.delayed(Duration(seconds: 1), () {
      controller.runJavaScript("helloNext('post from flutter')");
    });
    controller.addJavaScriptChannel(
      'chaam',
      onMessageReceived: (p0) {
        print('==========> ${p0.message}');
      },
    );

Next code

 window객체에 helloNext를 추가해 주었습니다.

	function helloNext(massage: string) {
		alert(massage);
	}
	useEffect(() => {
		if (window) {
			//@ts-ignore
			window.helloNext = helloNext;
		}
	}, []);

 

음,, 마운트 되기전에 Window객체에 함수를 추가하려고하니 vercel에서 배포안해주고 자꾸 에러를 뱉어내서 해당 방법으로 했습니다.

 

스크린샷