사내에서 인스타 라이브의 좋아요 인터렉션을 응용하면 구현이 가능할만한 인터렉션 요소를 개발해달라는 요구가 들어와서 한번 공유해보고자 한다. 먼저 맨 아래의 [인스타 라이브의 좋아요 인터렉션] 블로그 글을 참고하면 이해하는데 더욱 도움이 될 것 같다.  구현 프로세스1. 아이콘 터치2. 터치 위치에 인터렉션 요소를 가진 아이템 추가3. 애니메이션 종료4. 아이템 삭제  * 터치 및 해당 위치에 인터렉션 요소를 가진 아이템 추가 터치 위치값을 알기 위해선 GestureDetector 의 onTapDown 콜백 메서드를 활용할 수 있다.localPostion 과 globalPosition 을 가져올 수 있는데, globalPostion - 전체 스크린 영역에서 절대위치 값localPosition - 탭 한 위..

보호되어 있는 글입니다.

오늘 만들어볼 ui는 스크롤이 인덱스 아이템을 넘어갈때마다 tabbar 아이템이 자동으로 변경되는 ui이다. 필요한 것은 다음과 같다. 1. 각 인덱스 별 아이템의 높이를 동적으로 구한다. 2. 스크롤 된 offset 이 인덱스 별 아이템의 높이를 벗어날때마다 tabbar 의 아이템을 변경해준다. 3. tabbar 의 아이템을 tap 하면 해당 인덱스의 아이템으로 스크롤시켜준다. 해당 ui를 구현하는데 있어서 가장 까다로웠던것이 두가지가 있었는데 그중 첫번째가 아이템의 높이를 동적으로 구해주는 것이었다. 다행히도 Globalkey 를 이용하여 Widget의 Renderbox 에 접근해 크기를 구할 수 있었다. final ancestor = context.findRenderObject(); // 부모 위젯..

오늘 만들어 볼 ui 는 Expandable bottom sheet dialog 이다. 위 그림처럼 드래그를 했을때 드래그 한 만큼 길이가 늘어나거나 줄어드는 인터렉션을 가진 ui 이다. 해당 ui를 만들기 위해서 필요한 것은 다음과 같다. 1. 드래그 이벤트가 발생할때마다 dy 차이(delta dy) 를 BottomSheetContainer 의 height 에 더해준다 2. 사이즈를 최소 미만 또는 최대 초과 할 수 없도록 한다. 3. 드래그 이벤트가 끝났을 때, 설정된 기준점에 도달했다면 사이즈를 최대로 늘리고 그렇지 않다면 최소로 줄인다. 첫번째로, delta dy 를 BottomSheetContainer 의 기존 height 값에 더해주면, 드래그 하는만큼 컨테이너의 height 도 늘어남으로 ..

내 경우에는 "sqflite" 모듈을 찾을 수 없다는 에러였다. Pods 폴더에서 dependency를 확인해보니 sqflite 파일들이 Target Support files 폴더에 들어가있는것을 확인할 수 있었다. 원인은 build-type 별(flavor 사용중...)로 의존성을 include 해줬어야 했는데 그러지 않아서 발생했던 에러였다. 구체적으로 flavor [dev, staging, production] 을 설정하여 사용중이었는데, 이에 해당하는 xcconfig 파일들을 Debug.xcconfig, Release.xcconfig 파일에 include 시켜주니 정상적으로 Target Support files 폴더에 있는 의존성을 불러오는것을 확인할 수 있었다. Pod install 할때 War..

RxDart는 Dart의 Stream 과 StreamController의 기능을 확장한다. Dart는 기본적으로 꽤 쓸만한 Stream API 를 제공하는데, RxDart는 이 Stream API에 대한 대안이 아니라 확장 사양의 기능을 제공한다. RxDart는 Dart Stream을 대신하여 Observable 클래스를 제공하지 않는다. 대신에 몇가지 추가 Stream 클래스, 연산자 및 Subject를 제공한다. API 개요 Stream Classes - 여러 스트림을 결합 또는 병합하는 등의 기능을 사용하여 스트림을 만든다. Extension Methods - 원본 스트림을 throttling, buffering events 등의 다양한 기능을 가진 새 스트림으로 변환한다. Subjects - 추가..