(TIL) 2020-10-11 기록

오늘 한 일

• 오늘도 여전히 보이스 카드 작업을 했다.
• 작은 보이스 카드를 누르면 Hero 애니메이션이 재생되면서 큰 보이스 카드로 넘어가는 걸 만들려고 했는데 큰 보이스 카드에 재활용된 위젯들이 커진 보이스 카드에 반응을 제대로 하지 못했다.
• 왜냐하면 원래 Container의 크기와 Expanded로 감싸진 위젯들 사이에 있던 Spacer 위젯이 밀어낸 다음 만들어진 크기가 다르기 때문이다. 기존에는 가운데 프로필 사진이 Spacer 위젯이 밀어내기 전의 크기를 받았기 때문에 제대로 반응하지 못했고 특히 겉에 점선으로 이루어진 원은 CustomPaint였기 때문에 부모 Container가 밀려나 크기가 작아지건 말건 무조건 정해진 크기대로 그려버리는 문제가 있었다.
• 그러나 LayoutBuilder라는 위젯을 어떤 위젯의 자식 위젯으로 사용하면 이 위젯은 부모 위젯의 레이아웃이 변할 때마다 builder 함수를 다시 호출하여 BoxConstraint를 매개변수로 넘겨준다. 이 매개변수를 참조하여 ‘현재’ 부모 위젯의 레이아웃을 확인할 수 있어 실시간으로 반응하는 자식 위젯을 만들 수 있었다. 개꿀이었다.
• 그리고 전에 임시 녹음 화면을 만들 때 뒷 배경이 반투명한 페이지를 만들면서 showDialog 함수를 사용했는데 이 방법의 문제는 showDialog는 새로운 route를 push하는 게 아니기 때문에 특히 오늘 같은 경우에 Hero 애니메이션이 재생되지 않았다. 그래서 Navigator를 사용하되 CustomPageRouter를 임시로 만들고 opaque를 false로 준 뒤 push 되는 screen의 최상위 Material위젯의 type 매개변수에 MaterialType.transparency를 주어 바탕을 투명하게 만들고 화면을 꽉 채우는 Container를 Stack하고 배경색을 반투명하게 줌으로써 해결했다.
• Cached Network Image 패키지를 쓰지 않기로 했다. Caching을 관리할 수 있어서 쓴 건데 어차피 다른 네트워크 이미지 위젯들도 캐시를 알아서 관리해주는 편이고 해서 기능이 많은 Extended Image 패키지를 쓰기로 했다.
• Bootstrap의 Carousel 컴포넌트를 사용해보았다.
• CSS에서 z-index가 어떤 역할을 하는지 배웠다.
• MediaQuery BreakPoints에 대해 배웠다. 스크린 크기가 바뀔 때 일종의 조건문처럼 특정 css 스타일을 적용할 수 있다. 반응형 웹을 만들 때 필수이다.

내일 할 일

• 이제 메인 화면의 보이스 카드들과 클릭했을 때 뜨는 상세 보이스 카드도 틀은 완성했으니 이제 녹음 화면을 만들어야겠다. 사실 녹음 화면만 만들면 우리 앱에서 가장 복잡한 레이아웃은 다 만드는 것이 된다.
• 이때까지 배운 웹 개념들을 다시 복습하는 시간이 될 것 같다. 그런데 중간고사 기간이라 학교 공부를 하느라 웹 공부는 당분간 조금밖에 못할 것 같다.