라티의 작은 일기장

오늘은 스크롤에 따라 NavigationBar에 있는 Title이 하단 Fragment 영역으로 내려오며 커지는 Animation을 구현해보았다. 일단 NavBar에 있지만 영역을 벗어나며 커지는 듯한 효과를 주려면 Title 자체가 NavBar에 종속되지 않고 Stack에 있어야한다. Title이 줄어드는 Animation 효과를 구현하기 위해서는 AnimatedContainer와 AnimatedDefaultTextStyle이 필요하다. 둘 다 duration이라는 프로퍼티를 받을 수 있는데, Animation이 일어나는 주기를 설정한다. (값이 클 수록 긴 애니메이션) 그래서 스크롤이나 전환(Transition) 효과의 경우 굉장히 매끄럽게 동작하는 Animation 효과를 구현하려면 duration..

오늘은 Flutter에서 공식적으로 지원하는 애니메이션 위젯 중 ImplicitAnimation에 대해 알아보았다. 강의 초반에 Flutter Inspector에 대해 알아보는 시간이 있었는데, 아 이걸 왜 이제... ㅠㅠ 안 그래도 웹 개발에는 개발자 도구가 편하게 잘 되어있는데 Flutter엔 왜 없을까하고 고민이 많던 참이었다... 제일 필요했던 기능이 위젯을 클릭해서 해당 위젯을 구현하고 있는 코드로 한번에 이동하는 것이었다. 이제라도 알아서 다행이다. 그렇지만 나는 처음에 이렇게 Flutter Inspector를 실행할 수 없는 에러를 만났었다. 그래서 일단 스택오버플로를 뒤져서 아래 스텝을 밟았다. Help -> Find Action Choose Boot Java Runtime for the ..

오늘은 이전 챕터에서 만들었던 토스 클론 앱에 Flutter에서 제공하는 Animation을 적용하는 실습을 진행했다. 일단 전통적인 Animation 자체는 정적인 이미지들을 매우 잦은 빈도로 연이어 보여주면서 구현되는데, Flutter는 유저의 인터랙션과 Flutter 앱의 Build 사이에 Animation Layer를 도입하면서 애니메이션에 대한 최적화가 되어있다. Build 하위에도 Layout, Paint, Composition, Rasterize라는 Layer가 존재한다. 무튼 Animation Layer에서 Flutter는 Animation을 이루는 단일의 장면을 구현할때 tic()이라는 함수를 호출하게 된다. UI에 덧씌워서 유저의 인터랙션에 반응하는 UI를 만들 때 Code based ..

오늘은 토스앱 3시간 만에 만들기 섹션의 마지막 파트를 수강하는 날이다. 얼마 안 남았으니 힘내서 잘 끝내보자! 일반적인 앱의 설정 화면이 으레 그렇듯 토스도 설정 화면의 형태 자체는 스크롤이 가능한 리스트뷰의 형태를 갖는다. 그래서 오늘 배울 중요한 내용들은 화면을 구현하는 방법 보다는 설정값들을 디바이스에 저장하고, 다양한 설정값들을 어떻게 상태관리하는지... 이런 것들이 주를 이룬다. 강의를 계속 들어보니까 설정 화면을 그대로 클론하는 것이 아닌, 설정 화면에서 활용할 수 있는 위젯을 구현하는 방법과 그 설정값 상태를 어떻게 관리하는지에 대한 내용이 나온다. 나도 수강생 입장에서 이런 내용들이 더 중요하다고 생각한다. 굿굿 간단하게 푸시 알림 설정을 관리하는 메뉴를 만든다고 해보자. 그럼 형태는 아..

오늘은 주식 탭에서 상단 appbar의 검색 버튼을 눌렀을 때 나오는 화면을 구현하기 시작했다. 일단 강사님의 구현 속도가 너무 빨라서 강의를 한번 쭉 보면서 든 생각은... 단축키 활용 능력이 진짜 중요하다... IDE 활용을 잘하면 당연한 얘기지만 개발 속도가 매우 빨라진다. 오늘은 구현은 못하고 강의를 들으면서 필기만 열심히 했다. - SafeArea 위젯은 앱의 화면이 OS의 상단바와 겹치지 않도록 해준다. - TextInput 위젯의 textInputAction 프로퍼티로 네이티브 키보드의 주 액션 버튼 유형을 지정해줄 수 있다. (신기했음) - TextInput 위젯의 onEditingComplete 프로퍼티로 함수를 할당하면, 주 액션 버튼에 대한 콜백을 지정해줄 수 있다. - 네이티브 키보..

오늘은 주식 탭의 나머지 화면을 구현하고, Flutter에서의 상태 관리의 의미와 그 상태 관리를 쉽게 할 수 있도록 도와주는 패키지들에 어떤 것들이 있고, 어떤 것을 공부하면 좋은지에 대해 알아보았다. 지난번에는 여기까지 만들었다. 그래서 주식 탭 하단의 아코디언 아이템을 마저 완성해주었다. 여기서 중요하게 느껴졌던 개념은 각 종목의 개별 데이터를 그대로 보여주거나 가공해서 특정한 형식으로 유저에게 보여줘야할 때, 항상 재사용성에 관해 리팩터링을 수행해야한다는 것이다. 예를 들면 아래와 같은 상황이 있을 수 있다. 종목의 현재 가격이 전일 종가를 기준으로 얼마나 증가하거나 감소했는지 퍼센트 형식으로 보여지고 있고, 이는 계산(calculate)되어야하는 값이어서 별도의 getter가 필요한 상황이다. ..

오늘은 혜택 탭과 주식 탭의 일부를 완성했다. 혜택 탭의 경우 일반적인 수직 스크롤뷰 형태의 단순한 레이아웃 구조였지만, 주식 탭의 경우는 탭뷰와 아코디언이 포함된 새로운 형태의 레이아웃이었다. 새삼 토스 앱의 UI를 클론해보는 것만으로도 많은 공부가 되는 것 같다고 느꼈다. 위젯을 만드는 것은 웹 FE 개발에서 컴포넌트를 개발하는 방법과 거의 동일하다. 다른 점이 있다면 객체에 대한 필드 정보를 정의하기 위해 vo를 따로 만들어주는 정도? 그렇지만 TypeScript에서 타입을 정의하는 것도 같은 맥락의 작업이라서 뭔가 크게 어색하지는 않았다. 뷰(View) 스케일에서의 위젯을 나누고, 세부 위젯을 이루는 요소를 파악하고, 요소를 구현하기 위한 위젯과 vo를 작성하고, 각 요소를 적절한 위치에 배치하기..

오늘은 스크롤뷰 최상단에서 아래로 끌어당겨 정보를 최신화하는 기능과 알림 화면을 구현해보았다. 스크롤뷰 최상단에서 아래로 끌어당겨 정보를 최신화하는 기능을 줄여서 Pull to Refresh라고 한다. 이 기능을 구현하기 위해 RefreshIndicator라는 위젯을 활용할 것이다. // ... children: [ RefreshIndicator( onRefresh: () async {}, child: SingleChildScrollView( // ... RefreshIndicator 위젯은 child로 ScrollView 위젯을 받을 수 있고, 필수적으로 onRefresh라는 인자를 요구한다. onRefresh의 원형은 이렇게 Future 타입으로 선언되어있으며, 반환값이 Future 타입이라는 것은 ..