webview로 웹쇼핑몰 -> 앱 만들기 - 2.Flutter로 찍먹> 띄우기 그러나 웹사이트 안 메뉴들이 동작을 안함.

동영상 강의 1번 네비게이션 탭이 있는 앱 프로젝트 구조 설정하기 부분을 따라했다. 

 

우선 강의를 보면 기본적으로 개발환경설정이나 에뮬레이터 설정방법같은건 없어서 입문자들이 하기에는 좀 무리가 있는 듯 하다. 

딱 나같이 다른 언어를 이미 해본 사람들이 찍먹해보기 좋은 강좌라는 생각

특히 Firebase로 서버리스 페이지를 구축하는 거 해보고싶었는데 이번 기회에 해볼 수 있다는게 더욱 좋은듯..!! 

 

 

플러터 장점은 정말 문서(Document)가 잘되있다는것이다

https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html 

BottomNavigationBar class - material library - Dart API

 

네비게이션 메뉴의 아이콘을 바꿔보고자 찾은 공식문서..ㅎㅎ 

이거하나만 숙지하면 나도 플러터 개발자 쌉가능이겠는걸?! 

 

 

 

근데 공식문서에는 무슨모양인지는 안나와서 따로 검색해서 구글폰트에서 보게 되었다.

https://fonts.google.com/icons?selected=Material+Icons&icon.platform=flutter 

Material Symbols and Icons - Google Fonts

 

그리고 구글폰트로 이렇게 원하는 아이콘을 클릭하고 Flutter 버튼을 누르니 클래스명이 나오네요 ㅎㅎ

 

 

 

아주 잠깐 찍먹한 Dart언어는 첫인상은 브라켓이 정말 많다라는것... 

이전 코틀린으로 안드로이드 코딩할때도 그림작성하는 부분은 전부 xml을 여닫는거라서 

엄청 헷깔렸던것 같은데... 

 

근데 VScode Extension 이 잘되어있어서 확실히 코딩속도가 빨랐다..  

 

 

자... 이제 

이부분만 하고 바로 웹뷰를 띄우면 될것같은데 ...?! 과연.... 

 

 

https://codelabs.developers.google.com/codelabs/flutter-webview?hl=ko#0 

Flutter 앱에 WebView 추가  |  Google Codelabs

 

이부분도 코드랩에서 제공하는 메뉴얼이 있어서 따라해보았는데 중간부터 잘안되는.... 

우선 구성을 가지고 갈때, Android의 Layer처럼 Flutter에서는 

 MyApp > Material App > Scaffold > appBar > body 영역을 필수로 가져가야한다. 

특히 appBar 부분을 없애고 싶었는데, 일단 필수 구성중에 하나임.. (인터넷에 돌아다니는 여러 꼼수 코드들이 존재한다.. 그렸다가 지우던가 투명처리를 한다던가...) 

 

 

 

언뜻 괜찮아 보이나..!! 

좌측상단에 햄버거버튼이나 돗보기 버튼을 눌르면 동작을 안한다.. 왜 동작을 안하는지도 체크하고싶어서 디버깅 방법을 찾아보았다. 

 

https://flutter-ko.dev/docs/testing/debugging

Flutter 앱 디버깅하기

( 아우.. 공식문서가 한글로된것도 있었네... 이제봄..ㅠ ) 

 

근데 구글 검색을 통해서 알아본 결과..!! 자바스크립트를 활성화하면된다고.... 

왠지 돌아다니는 코드 중에 아래와 같은 코드를 넣으면 된다고 해서 넣어봤는데.. 안됨ㅋㅋ 그냥 꺼짐.. 

javascriptMode: JavascriptMode.unrestricted,

 

코틀린 개발할때랑 마찬가지로.. 앱은 개발하다가 안되면 꺼져버리는구나... 

 

 

 

 

 

점점 더 그럴싸하게 완성되고 있는 네비게이션.. 내일은 아마? 큰무리없이 완성할수있을듯?!?! 

 

13개중 7개 완료하고 자바스크립트 부분은 10번에 있다.

한글메뉴얼까지 이렇게 다 있다니~_~)~ 넘나좋은것.. 이걸로 개발하자고 해야겠네... !! 

dart 언어가 braket은 많지만 js보다 가독성이 좋아보임.. ㅎㅎ