Flutter 7

[Flutter] webview_flutter JS 자바스크립트 통신 구현

안녕하세요. 웹뷰 앱을 만들면서 js 통신 작업을 진행했는 데 검색해도 별다른 팁이나 방법이 안내된게 많지 않다보니 정석은 아니지만 어떻게든 구현했던 방법을 공유하고자 합니다. 아래 사진과 같이 javascriptChannels를 작성해줍니다. 이때, _webToAppChange(context)는 아래에서 말씀해드리겠습니다. 저는 html 파일에서 아래와 같이 WebToApp이라는 자바스크립트 함수를 만들었습니다. 내용을 요약하자면 WebToApp이라는 함수를 호출할 때 json 데이터를 만들어 commandType 등의 전달한 명령어가 어떤 수행을 할 것인지에 대한 구분자를 작성해줍니다. 여기서 중요한 것은 webToAppChange.postMessage(jsonData); 입니다. webToAppCh..

Flutter 2022.08.04

[Flutter] webview_flutter Local File 웹뷰 로컬 파일 열기

저는 주로 C++언어를 다루기 때문에 Flutter에서 UI를 그려내기엔 숙련도가 매우 낮아 어려움이 있었습니다.. 그나마 웹은 Bootstrap을 자주 사용해봤고 반응형 웹을 만드는 것이 시간도 절약되고 당장에는 편할 것 같아 간단히 웹뷰 앱을 만들기로 했습니다. 근데 문제는 간단한 기능과 UI를 제공할 뿐인데 웹을 일일히 접속하기엔 트래픽을 감당할 자신이 없었습니다. 그래서 로컬에 html, js, css를 보관해서 불러오도록 구현했고 주요 기능, 통신 기능은 앱에서 작동하고 이를 js통신으로 웹뷰에서 불러온 로컬 파일과 통신하도록 구현했습니다. 회사 내에서 개발하던게 완료되어 자그마한 노하우를 공유하고자 합니다. 일단 저는 아래 패키지를 사용했으니 참고바랍니다. https://pub.dev/pack..

Flutter 2022.08.04

[Flutter] webview_flutter gesture(swipe) page move disable

history 관리 기능이 없다는 것을 알게 되었습니다. 제가 개발하고 있는 앱에서는 http통신과 기타 기능을 제외하고 단순히 웹뷰 내에서 모든게 이루어집니다. 이러한 상황에서 IOS는 swipe로 history에 기록된 뒤, 앞 페이지로 이동하는 게 가능하다 보니 해당 history 기록을 clear 할 수 있는 지 찾아보았으나 제가 사용 중인 https://pub.dev/packages/webview_flutter 패키지는 지원하지 않고 결국 이 기능은 현재 inappwebview 패키지 밖에 지원되지 않는다고 하네요.. 결국 gesture를 사용한 페이지 이동을 비활성화 해야 했습니다. 주구장창 Flutter webview_flutter swipe disable 등등 검색해보았으나 아무리 검색해도..

Flutter 2022.08.01

[Flutter] 안드로이드 캡쳐 방지 적용

보통 안드로이드 스마트폰에서 은행어플이나 금융관련 어플에서 스크린샷 기능을 사용 시 사용할 수 없다는 메세지 보셨을 텐데요. 이는 안드로이드에서만 가능하고 아이폰(IOS)에서는 불가능 합니다. 테스트해보니 아이폰에서 은행어플을 들어가 캡쳐 시도하니 잘 찍히더군요.. 쨌든 안드로이드에서 스크린샷을 사용하지 못하도록 방지하는 좋은 패키지가 있어 글로 남깁니다. https://pub.dev/packages/flutter_windowmanager flutter_windowmanager | Flutter Package A Flutter plugin for manipulating Android WindowManager LayoutParams. pub.dev 일단 해당 패키지를 설치해야합니다. 안드로이드 스튜디오 내..

Flutter 2022.04.18

[Flutter] 패키지명 간단히 변경하기

https://pub.dev/packages/rename rename | Dart Package Helps you to change or rename your flutter project BundleId and AppName for Ios, Android, MacOS and Linux platforms pub.dev 해당 패키지를 설치해야 합니다. 안드로이드 스튜디오 내 터미널을 열고 아래 명령어를 입력해주세요. flutter pub global activate rename 해당 명령어를 입력하시면 설치가 진행됩니다. 이 후 아래 명령어를 입력해주세요. flutter pub get 그리고 변경하실 패키지명을 적용할 차례입니다. 아래 명령어를 입력해주세요. 이때 com.test.name은 원하시는 패키지명..

Flutter 2022.04.18

[Flutter] 앱 이름 간단히 변경하기

https://pub.dev/packages/flutter_launcher_name/install flutter_launcher_name | Flutter Package A command-line tool which simplifies the task of updating your Flutter app's launcher name. pub.dev 해당 패키지를 설치합니다. 안드로이드 스튜디오를 사용하신다면 터미널을 열고 로컬 경로인 상태에서 아래 명령어를 입력해줍니다. flutter pub add flutter_launcher_name 그리고 다시 아래 명령어를 입력하여 적용합니다. flutter pub get 이 후 pubspec.yaml 파일을 열고 아래 내용을 입력해줍니다. flutter_launc..

Flutter 2022.04.18