오늘 만들어볼 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 - 추가..

TDD란 ? 실패하는 테스트 작성 -> 테스트가 성공하게 만들기 -> 작성한 코드 리팩토링 순서를 계속 반복하면서 소프트웨어를 개발해 나가는 방법론이다. 먼저 실습할 앱은 flutter skeleton 앱이며, 기존에는 tap을 하게되면 카운트가 1씩증가했지만 요구사항이 변경되어 카운트가 2씩 증가하는 기능으로 변경하고자한다. 1. 카운트가 2씩 증가하는 테스트 작성 void main() { testWidgets('Counter increments smoke test', (WidgetTester tester) async { // Build our app and trigger a frame. await tester.pumpWidget(const MyApp()); // Verify that our count..

1. createState() State 객체를 생성한다. State란 StatefulWidget의 내부 상태와 로직이다. 즉, StatefulWidget은 State 객체를 생성하고 자신의 상태와 로직을 관리시킨다. 2. mounted = true 일단 State 객체를 생성하면, initState()가 호출되기 전에 해당 객체를 BuildContext와 연관시키고 mounted 상태를 true로 변경한다. mounted = true 상태는 State객체가 트리에 올라간 상태를 뜻한다. 이러한 BuildContext와의 연관은 영구적이며, State 객체는 절대 연관된 BuildContext 다른것으로 바꾸지 않는다. 3. initState() 각 State객체가 생성될때 단 한번만 호출된다. 처음 초..