Flutter

문제 상황 플러터 웹을 구현하던 도중 애니메이션 효과가 너무 무거웠다. iOS의 경우 animation을 줄 때 비동기 프로그래밍으로 계산을 처리하기 때문에 여기서 아이디어를 얻어 isolated 를 써서 다른 스레드에서 작업을 돌리려고 했다. 하지만 애니메이션 효과는 영원히 나타나지 않았고 디버그 모드로 다시 실행시켜보니...  플러터 웹은 isolated를 지원하지 않는다고 한다....;;;; 아무리 모바일보다는 덜 사용하는 플러터 웹이지만 대부분 프레임워크에서 거의 필수적으로 들어가는 동시성 프로그래밍이 안된다는게 너무 이상해서 구글링을 해보았다. 다행히 isolate가 아닌 다른 방법으로 멀티프로세싱을 구현할 수 있었다. Flutter Web에서 멀티 프로세싱하기 Flutter 웹에서 Isolat..

문제 상황분명 아무런 패딩값도 주지않고 탭바와 리스트뷰를 Column으로 수직배치했는데 리스트뷰는 위와같이 정상적으로 나왔지만 탭바부분이 이상하게 왼쪽 간격이 들어가있었다.    문제 해결isScrollable 속성 때문이었다.  isScrollable가 true로 설정되면, 각 탭은 자신의 내용에 맞춰 크기를 갖는다. 예를 들어, "Home"이라는 텍스트가 있는 탭은 "Settings"라는 텍스트가 있는 탭보다 더 좁을 수 있다. 이렇게 정해진 화면 너비 대비 계산이 아닌 주어진 텍스트 기반으로 너비를 정함으로써 탭의 개수가 많아서 화면에 모두 표시될 수 없을 때, 사용자는 수평 스크롤을 통해 나머지 탭으로 이동할 수 있다. 각 탭이 자신의 내용에 맞게 배치되기 때문에 스크롤이 가능해지는 것이다. is..

문제상황파이어스토어 모델과 프론트 모델이 일치하는지 검증하는 통합테스트 코드를 작성했다.분명 yaml 파일에 통합테스트 패키지를 임포트했음에도 위와같이 패키지를 찾지 못하고 있다는 런타임에러가 발생했다.문제 해결파일경로 문제였다. 플러터 통합테스트 패키지는 정해진 파일경로와 파일이름을 통해 테스트를 실행한다.나는 Test폴더안에서 통합테스트 파일을 만들어 실행했더니 위와같은 에러가 떴었다.integration_test 폴터를 루트디렉토리에 새로 만들고 이곳에서 통합테스트 다트파일을 만들어줘야 에러가 해결된다.만약 Test 폴더 안에서 통합테스트 폴더를 만들어 실행시킬 경우 flutter drive --driver 커맨드 명령어를 실행할 때 파일 경로를 지정해주어서 통합테스트를 실행시켜야한다.

네비게이션 탭바를 Stateful 위젯으로 만들어 탭할시 파란색 아이콘 이미지로 바꿀 수 있었으나가급적 Stateless 위젯을 사용하여 최적화 시키고 싶었다.Statless 위젯을 사용하면서 이미지의 색을 바꾸는 방법에 대해 알아보자.배경 지식참고링크: https://api.flutter.dev/flutter/dart-ui/BlendMode.html Flutter의 UI렌더링 과정 이해하기 Flutter의 UI렌더링 과정은 아래와 같다개발자가 작성한 코드를 통해 위젯 트리가 생성된다.위젯 트리가 빌드된 후, Flutter는 상태와 위젯트리 생명주기를 관리하는 Element Tree, 그리고 위젯의 위치와 크기 정보를 가지고 있는 Render Tree를 만든다.상위위젯부터 하위위젯까지 제약조건이 잡히고,..

https://medium.com/flutter/whats-new-in-flutter-3-24-6c040f87d1e4 What’s new in Flutter 3.24Unleashing Flutter GPU, Multi-View Embedding, and Moremedium.com 어젯밤 플러터 3.24 업데이트가 있었다. 주요 업데이트는 다음과 같다. UI1. SliverFloating Header 기능 추가2. PinnedHeaderSliver 기능 추가3. SliverResizingHeader 기능 추가4. Two diementional ScrollView 기능 추가5. TreeView 기능 추가6. CaraouselView 기능 추가7. 애니메이션 상태가 enum으로 선언! 이를 통해 애니메이션 상..

많은 플러터 프로젝트들이 모델 선언을 할 때 Freezed 패키지를 사용한다. 왜 다들 Freezed 를 사용할는 걸까? 꼭 패키지를 써야하는걸까? 등등 몇가지 의문점이 들게되었고 공부한 기록을 블로그 포스트로 남겨보려한다. 먼저 모델 선언에 있어서 전제조건은 모델을 통해 만들어진 인스턴스가 같은 녀석인지 다른 녀석인지 비교할 수 있어야한다. 이를 동등성 비교라고 부르는데 왜 모델 선언에 있어서 동등성 비교가 중요할까? 이유는 3가지로 요약할 수 있다. 1. 데이터 무결성 확인데이터 무결성이란 모든 데이터 값이 정확한 상태(state)임을 보장할 수 있음을 의미한다. 즉 데이터의 중복이 생겨선 안된다는 것이다. 예를 들어 강아지라는 모델을 만들고 두마리 강아지 인스턴스를 만들었다고 하자. 만약 두마리 강..

Don't use 'BuildContext's across async gaps.Try rewriting the code to not use the 'BuildContext', or guard the use with a 'mounted' check.블록으로 로그인 이벤트를 처리하는 함수를 작성하고 있었다.로그인을 성공하면 메인화면으로 이동해야했기 때문에 view에서 context를 받아야만 했다.하지만 로그인 함수(비동기)안에서는 context를 건네주지 말라는 문구가 떴다. 문제 원인 BuildContextBuildContext 는 위젯트리에서 해당 위젯이 트리 어느부분에 위치하고 있는지 알 수 있는 정보이다. 즉 네이밍 그대로 빌드하는데 필요한 정보(문맥)이라고 볼 수 있다.  플러터에서 UI를 그려낼..

Squircle 이란?플러터로 sliver 리스트를 구현하던 중 corner radius 값을 주어 끝을 둥글게 만드는 코드를 작성했다. 하지만 막상 실기기로 돌려보니 끄트머리가 묘하게 각져있는 것을 확인할 수 있었다. 앱 디자인이 전반적으로 "둥글둥글" 느낌이 나야하는데 먼가 SwiftUI에서 구현했을 때랑 느낌이 달랐다.. 분명 SwiftUI는 CornerRadius값만 주어도 둥글둥글한 느낌이 살아있었다. 백문이불여일견, 바로 같은 Corner Radius를 주어 SwiftUI와 Flutter를 비교해보았다. 역시 애플 갓위는 SwiftUI 코드로 작성한 Rounded Container이고 아래는플러터로 작성한 Rounded Container이다. 자세히 들여다보면 플러터 모서리가 묘하게 각져있음을..

소셜로그인을 구현하면서 사용자가 두번째 로그인부터는 생체인증으로 간단하게 메인으로 진입하게 구현하기위해 사용자 로그인 기록을 로컬 DB에 넣어야했다. 보통 이런정보는 보안이 딱히 중요하지 않고 간단한 정보라 생각해서 iOS의 경우 Userdefault에 저장했고 플러터에서는 Userdefault 랩핑하고있는 Shared Preference 패키지를 사용하려고 했다. 하지만 안드로이드 진영 SharedPreference에 이슈가 있다는 것을 알게되어 공식문서를 들여다 보게 되었다.  shared preferences 는 위와 같이 iOS의 userdefaults를, 안드로이드의 SharedPreferences를 랩핑하고 있는 패키지이다. Userdefaults는 iOS에서 단순한 DB저장 도구로 키-밸류형..

플러터에는 사용자 터치이벤트 처리를 위한 위젯으로 Inkwell 위젯과 GestureDetector 위젯이 있다. Inkwell 위젯Inkwell 위젯은 Material 위젯안에서 사용되기 때문에 Material 디자인 시스템이 적용되어 사용자 이벤트를 처리한다.따라서 사용자가 탭할시 Material 디자인 테마 효과인 Ripple Effect가 기본으로 구현된다. GestureDetector 위젯 GestureDetector 위젯도 inkwell 위젯처럼 사용자 터치이벤트를 처리해준다.차이점으로는 GestureDetector는 Matrial 하위위젯이 아니다! 따라서 Material 디자인 시스템이 적용되지 않고 위와같은 리플 이펙트도 적용되지않는다.또한 inkwell보다 좀더 다양한 터치제스쳐 처리가..