구글 Flutter 로 하이브리드 웹 앱 띄우기 1

이래저래 사정이 있어서

구글 Flutter 로 하이브리드 웹앱을 만드는 중..

시간 관계 상 자세히 파고드는 건 다음에 하고..

일단 만드는 것 우선으로 해서 이래저래 찾아보면서 소스 줒어서 조립 중..

다음이 그 소스..

시간 될 때 Flutter 는 함 배워볼 만 할 듯..

0. 세팅은 알아서.. 유튜브나 구글링 해보면 강좌들이 많다. 사용한 Flutter 버전은 3.0.1

1. 소스는 간단하나 실제로 Webview 를 띄워보니 javascript가 전혀 동작하지 않아서 먹통이 되어 황당했음.

2. 별도의 javascript 처리기를 구현해야 함을 구글링을 통해 알고, 처리 후 정상작동 확인.

3. javascript 처리기 원 소스는 다음 링크 : https://cording-cossk3.tistory.com/103

4. 그리고 앱 빌드하고 구동시에 사이트 로딩시 'net::ERR_CLEARTEXT_NOT_PERMITTED' 같은 오류가 발생한다면 다음 링크 확인 : https://stackoverflow.com/questions/55592392/how-to-fix-neterr-cleartext-not-permitted-in-flutter

이하 소스!

끗~~! 뭘봐!

import 'package:flutter/material.dart';

import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        //appBar: AppBar(),

        appBar: AppBar(

          title: const Text('제목자리'),

        ),

        body: WebView(

          initialUrl: '호출할URL',

          javascriptMode: JavascriptMode.unrestricted,

          onWebViewCreated: (WebViewController webViewController) {

            //_controller.complete(webViewController);

          },

          onProgress: (int progress) {

            print("WebView is loading (progress : $progress%)");

          },

          javascriptChannels: <JavascriptChannel>{

            _webToAppChange(context),

          },

        ),

      ),

    );

  }

}

JavascriptChannel _webToAppChange(BuildContext context) {

  return JavascriptChannel(

      name: 'webToAppChange',

      onMessageReceived: (JavascriptMessage message) {

        // ignore: deprecated_member_use

        print("webToAppChange 메시지 : ${message.message}");

      });

}