안녕하세요~ totally 개발자입니다. Material 3 Design 보통 플러터 앱 개발을 하실 때 로직 부분을 개발하는데에도 시간이 많이 소요되지만 디자인적인 측면에서도 시간이 많이 소요되는 것을 느끼실 것입니다. 그 때 구글의 머터리얼 (Material) 3의 디자인을 적용하면 디자인적으로 통일성과 자연스러움을 간단하게 적용할 수 있습니다. 사용을 위해서는 당연히 플러터는 업그레이드가 되어 있어야 합니다. 상세한 내용을 아래를 통해 가이드를 확인할 수 있습니다. https://m3.material.io/ Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by op..

안녕하세요~ totally 개발자입니다. TabBarView & InAppWebView WebView를 사용할 때 패키지는 주로 flutter_inappwebview나 webview_flutter가 사용됩니다. 이 때 flutter_inappwebview를 사용하고 TabBarView를 이용할 때 스크롤이 되지 않는 문제가 있는데 그 때에는 아래 Stackoverflow에 나와 있는 대로 Set()..add 부분을 추가해주시면 됩니다. https://stackoverflow.com/questions/67345346/flutter-inappwebview-scroll-not-working-inside-the-nestedscrollview-tabbarview Flutter inappwebview scroll ..

안녕하세요~ totally 개발자입니다. WebView를 사용하시다보면 웹사이트 페이지에 있는 iframe 태그로 구현된 유튜브 영상의 경우 전체화면을 눌러도 안드로이드의 경우 전체화면이 되지 않는 경우가 있습니다. 현재 webview_flutter로는 이것을 해결할 방법이 아직 발견되지 않았고 flutter_inappwebview 패키지를 사용하여 해결할 수 있습니다. Step 1: pubspec.yaml에 flutter_inappwebview 패키지를 추가합니다. Step 2: 사용하실 페이지에서 import합니다. Step 3: 먼저 controller 변수 선언하신 뒤, 아래처럼 InAppWebView 위젯으로 url를 넣어주면 됩니다. 개발에 도움이 되셨기를 바랍니다. Reference: htt..

안녕하세요~ totally 개발자입니다. 플러터 개발을 하시다보면 아래 에러가 종종 발생하는 것을 보신 적이 있을 겁니다. 저는 현재 M1 맥북과 VSCode를 사용하고 있습니다. 해결책은 아래와 같습니다. Step 1: flutter clean 명령어 입력 Step 2: flutter pub get 명령어 입력 Step 3: ios 이슈이니 ios 경로로 가셔서 pod install 명령어 입력 Step 4: 그리고 sudo gem install cocoapods 입력하시고 root 비밀번호(맥 비밀번호)를 입력하시면 됩니다. Step 5: run 실행해줍니다. 다만 여기에서 fn + F5로 디버그 모드로 실행했을 때 에러가 계속 나오는 경우가 있습니다. 이 때에는 터미널에서 flutter run --..

안녕하세요~ totally 개발자입니다. Flutter & Google Analytics 4 설치 및 연동 이 포스팅에서는 Google Analytics 4를 Flutter 앱에 연동하는 방법에 대해 살펴보도록 하겠습니다. 먼저 기본적으로 파이어베이스와 플러터 앱은 연동되어 있어야 합니다. Step 1: 파이어베이스에 접속 -> 프로젝트 설정 -> 통합 -> Google Analytics 사용 설정을 눌러줍니다 (이미 되어 있는 경우에는 스킵하시면 됩니다) Step 2: 계정 선택 후 이미 생성된 계정이 있는 경우에는 그 계정을 선택하면 되고 없는 경우에는 새로 생성하시면 됩니다. 위처럼 입력하고 저장합니다. Step 3: 위치를 지정하고 사용 설정하시면 됩니다. Step 4: 각 플랫폼 별 SDK 추가..

안녕하세요~ totally 개발자입니다. WebView JavaScript Communication Flutter로 개발을 하다보면 웹뷰를 통해서 구현하는 경우가 필요합니다. 웹뷰를 통해서 구현할 때 웹 쪽과 플러터 앱 사이에 통신이 필요한 경우가 있습니다. 통신한다는 이야기는 데이터를 주고 받는 것을 말하며 주로 url 뒤에 데이터를 붙여 parameter 값을 넘기거나 웹 쪽의 자바스크립트 함수를 호출하는 방법이 있습니다. 이 포스팅에서는 자바스크립트 함수를 호출하는 방법을 통해 통신해보도록 하겠습니다. 사용한 패키지는 webview_flutter이며 최신 버전을 사용하면 아래 방법으로 구현이 안 되기 때문에 조금 이전 버전을 사용해야 하며 저는 3.0.4 버전을 사용하였습니다. 참고로 웹뷰로 사용할..