패스트캠퍼스 환급챌린지 28일차 미션(2월 28일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

오늘은 Flutter에서 공식적으로 지원하는 애니메이션 위젯 중 ImplicitAnimation에 대해 알아보았다.

강의 초반에 Flutter Inspector에 대해 알아보는 시간이 있었는데, 아 이걸 왜 이제... ㅠㅠ 안 그래도 웹 개발에는 개발자 도구가 편하게 잘 되어있는데 Flutter엔 왜 없을까하고 고민이 많던 참이었다... 제일 필요했던 기능이 위젯을 클릭해서 해당 위젯을 구현하고 있는 코드로 한번에 이동하는 것이었다. 이제라도 알아서 다행이다.

 

그렇지만 나는 처음에 이렇게 Flutter Inspector를 실행할 수 없는 에러를 만났었다.

그래서 일단 스택오버플로를 뒤져서 아래 스텝을 밟았다.

Help -> Find Action

Choose Boot Java Runtime for the IDE

JCEF를 포함하는 JDK 선택 또는 설치

안드로이드 스튜디오 재실행

 

이후에 저 에러는 안 떠서 뭔가 해결될 줄 알았는데 나온 또다른 에러 "Too many restarts of GPU-process(JCEF)"...

또 찾아보니 아래와 같은 스텝을 밟으라고 한다.

Help -> Find Action

Registry...

ide.browser.jcef.sandbox.enable option을 비활성화

안드로이드 스튜디오 재실행

 

 

해결!! 후,,,

 

상태에 따라 위젯의 크기를 점차 키우거나 줄이는 애니메이션을 구현하기위해, AnimationContainer라는 것을 활용했다.

여기는 curve라는 프로퍼티를 받게 되는데, 가장 많이 사용하는 Curve는 Curves.easeIn과 Curves.easeOut이라고 한다.

이것을 구현하고 있는 코드를 따라가보면 Cubic이라고하는 객체의 인스턴스임을 알 수 있다.

static const Cubic easeIn = Cubic(0.42, 0.0, 1.0, 1.0);

Cubic 객체는 Basic Curve라는 방식을 통해 Curve를 그린다고 한다.

 

AnimatedContainer에 지정하게되는 스타일 관련 프로퍼티는 전부 애니메이션이 적용되어 스타일을 변경시킨다.

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N