모바일어플개발/Flutter(73)
-
[073] 플러터 (Flutter) 배우기 - Throttle 적용하여 리스트뷰(ListView) 페이지네이션 API 중복 호출 방지하기
안녕하세요 totally 개발자입니다. 이 포스팅에서는 플러터 패키지 중 debounce_throttle을 사용하여 Throttle 개념을 적용해보도록 하겠습니다. 우선 Throttle의 사용 목적에 대해서 알아야 합니다. 이 포스팅 이후에 Debounce에 대해서도 다룰 것이지만 Throttle과 Debounce는 비슷해보이나 서로 다른 목적을 가지고 있습니다. Throttle은 일정한 주기 동안 특정 함수가 여러 번 호출된 경우 함수를 한 번만 바로 실행하고 연속적으로 함수를 호출하는 것은 방지할 수 있습니다. 반대로 Denounce는 정해진 시간 동안 특정 함수가 여러 번 호출된 경우 마지막으로 실행된 함수를 호출합니다. Throttle특정 시간 동안 여러 번의 함수 호출이 있을 경우 함수를 한 번..
2024.05.26 -
[072] 플러터 (Flutter) 배우기 - 위젯을 이미지로 변환 및 저장하기(Widget to Image)
안녕하세요~ totally 개발자입니다. 플러터 앱을 개발하다보면 플러터 화면에 표시된 위젯들 중 일부 또는 전체를 이미지로 변환해서 저장하는 기능을 제공해야 하는 경우가 있습니다. 이를 구축하기 위해 아래 패키지를 사용할 수 있습니다. https://pub.dev/packages/flutter_image_saver flutter_image_saver | Flutter package Simple and effective cross platform image saver for flutter, supported web and desktop. pub.dev Step 1: 먼저 pubspec.yaml 파일을 열어주시고 flutter_image_saver 패키지를 추가합니다. Step 2: 패키지 dart.ui,..
2024.03.23 -
[071] 플러터 (Flutter) 배우기 - 보안 키패드 적용하기(flutter_secure_keyboard 패키지 사용)
안녕하세요~ totally 개발자입니다. 이 포스팅에서는 보통 결제할 때 카드 번호, 비밀번호 등 사용할 수 있는 보안 키패드 적용하는 방법에 대해서 알아보도록 하겠습니다. 패키지는 https://pub.dev/packages/flutter_secure_keyboard flutter_secure_keyboard를 사용하면 됩니다. flutter_secure_keyboard | Flutter package Mobile secure keyboard to prevent KeyLogger attack and screen capture. pub.dev 이 보안 키패드를 적용하면 KeyLogger 공격, 스크린 캡쳐 등 여러 가지 위험을 방지할 수 있게 됩니다. 바로 실습해보도록 하겠습니다. Step 1: pubs..
2024.03.17 -
[070] 플러터 (Flutter) 배우기 - 머터리얼 (Material 3) 디자인 사용해서 빠르게 부드러운 색상 적용하기
안녕하세요~ 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..
2023.09.02 -
[069] 플러터 (Flutter) 배우기 - TabBarView와 InAppWebView와 연동(스크롤 이슈도 해결하기)
안녕하세요~ 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 ..
2023.08.12 -
[068] 플러터 (Flutter) 배우기 - WebView(웹뷰) JavaScript 통신(데이터 주고받기)
안녕하세요~ totally 개발자입니다. WebView JavaScript Communication Flutter로 개발을 하다보면 웹뷰를 통해서 구현하는 경우가 필요합니다. 웹뷰를 통해서 구현할 때 웹 쪽과 플러터 앱 사이에 통신이 필요한 경우가 있습니다. 통신한다는 이야기는 데이터를 주고 받는 것을 말하며 주로 url 뒤에 데이터를 붙여 parameter 값을 넘기거나 웹 쪽의 자바스크립트 함수를 호출하는 방법이 있습니다. 이 포스팅에서는 자바스크립트 함수를 호출하는 방법을 통해 통신해보도록 하겠습니다. 사용한 패키지는 webview_flutter이며 최신 버전을 사용하면 아래 방법으로 구현이 안 되기 때문에 조금 이전 버전을 사용해야 하며 저는 3.0.4 버전을 사용하였습니다. 참고로 웹뷰로 사용할..
2023.07.15