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

안녕하세요~ totally 개발자입니다. Collection & Generic 이미 해당 부분은 그 동안 포스팅을 해오면서 자연스레 많이 사용하였습니다만 해당 부분에 대한 원리와 개념을 아는 것이 중요하다고 생각되어 포스팅을 쓰게 되었습니다. Collection(콜렉션)이란 데이터들을 모아둔 자료 구조를 말합니다. 플러터는 다트 언어를 사용하고 있으니 Map과 List가 Collection으로 쓰이게 됩니다. 제네릭을 설명하기 전에 제네릭의 유무 차이는 아래와 같습니다. 제네릭을 사용하지 않은 경우 List studentNameList = []; 제네릭을 사용한 경우 List studentNameList = []; 위와 같이 제네릭을 사용하면 사용하고 있는 Collection에 Type(타입)을 지정하게..