AnimatedContainer class
시간이 지남에 따라 값이 점차 바뀌는 Container 의 애니메이션 버전입니다.
AnimatedContainer 는 제공된 곡선과 지속 시간을 사용하여 속성의 이전 값과 새 값 사이에서 자동으로 애니메이션을 적용합니다. null인 속성은 애니메이션이 적용되지 않습니다. 자식 및 하위 항목도 애니메이션이 적용되지 않습니다.
이 클래스는 내부 AnimationController 를 사용하여 Container 의 여러 매개변수 간에 간단한 암시적 전환을 생성하는 데 유용합니다. 더 복잡한 애니메이션의 경우 DecoratedBoxTransition 과 같은 AnimatedWidget 의 하위 클래스를 사용하거나 자체 AnimationController를 사용하는 것이 좋습니다.
공식 문서 코드
AnimatedContainer 는 우리가 앱을 제작할 때에 디자인적 요소에 있어서 정말 빠질 수 없는 부분을 채워주는 위젯이다.
"정말 빠질 수 없는 부분"은 바로 유연한, 유동적인, 움직이는 레이아웃을 말하는 것인데 애니메이션이 들어간 것과 들어가지 않은 것에 대한 차이는 말하지 않아도 알 것이다.
일단 이 위젯은 사용하기가 굉장히 쉽다. 그 이유가 어째서냐면 이 위젯은 그냥 컨테이너이기 때문이다.
그렇다. 그냥 컨테이너랑 다른 점이라고는 값이 바뀌면 알아서 그에 따라 애니메이션이 되고 듀레이션이 있다는 정도밖에 없다.
그래서 사용 또한 굉장히 쉬운 것인데 먼저 하위 속성을 알고 가자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| child | Widget? | - | 내부에 배치될 자식 위젯 |
| alignment | AlignmentGeometry? | null | 자식 위젯을 정렬할 위치 지정 |
| padding | EdgeInsetsGeometry | null | 자식 위젯 주변의 내부 여백 |
| color | Color? | - | 단색 배경 색상 (단독 사용 시 decoration 대신 가능) |
| decoration | Decoration? | null | 배경 및 테두리 등 장식 효과 |
| foregroundDecoration | Decoration? | null | 자식 위젯 위에 덧씌울 장식 효과 |
| width | double? | - | 컨테이너 너비 |
| height | double? | - | 컨테이너 높이 |
| constraints | BoxConstraints? | null | 자식 위젯에 적용할 추가 제약 조건 |
| margin | EdgeInsetsGeometry? | null | 컨테이너 외부 여백 |
| transform | Matrix4? | null | 컨테이너에 적용할 변형 행렬 |
| transformAlignment | AlignmentGeometry? | null | 변형 기준 정렬 (transform 사용 시만 유효) |
| clipBehavior | Clip.none | Clip.none | 데코레이션이 있을 때 잘라내기 여부 |
| curve | Curve | Curves.linear | 애니메이션 스타일 |
| duration | Duration | (필수) | 애니메이션 지속 시간 |
| onEnd | VoidCallback? | null | 애니메이션 종료 시 콜백 함수 |
어우 역시 컨테이너라 들어가는 하위 속성이 많긴 하다;;
일단 어떻게 동작되는지 알아보자. 영상에 나와 있다시피 값이 다른 값으로 바뀔 때면 setState로 호출을 해야 한다고 나와있다.
그렇다. 당연한 것이지만 이 위젯은 단독으로는 사용 못 한다. 무조건 뭐 값을 생성해서 연결해야 하는 숙명인 것이다.
사용법은 간단하다.
AnimatedContainer(
duration: Duration(seconds: 2),
height: isToggled ? 200 : 100,
width: isToggled ? 150 : 75,
// TODO Try Anything!!
),required 값인 duration 을 넣어주고 넣고 싶은 아무 값이나 넣어서 삼항연산자로 만들든 if 문으로 만들든 그냥 만들면 된다.
난 이걸 사용할 때에 처음에 이런 의문이 들었다. "듀레이션 값도 설정했고 값도 정상적으로 바뀌는데 이제 애니메이션은 어떻게 주는 거지?" 이 의문의 대답은 바로 "이미 애니메이션은 들어가 있음" 이였다.
이게 무슨 말이냐 하면 우리가 따로 애니메이션 하는 동작을 넣지 않아도 그냥 값이 바뀌는 것만으로도 알아서 애니메이션 시켜준다는 것이다.
우리가 할 일은 그저 그 애니메이션의 curve 값과 duration 값만 설정해 주면 되는 것이다. 정말 쉽지 않은가? 이게 끝이다.
애니메이션 되는 값은 이렇게 있는데
테두리, 테두리 반경, 배경 이미지, 그림자, 그라디언트, 모양, 패딩, 폭, 높이, 정렬, 변형
이 모든 것이 애니메이션 된다는 소리이다!
허나 애니메이션이 마음에 안들 수 있다. 그럼 이제 어떻게 하는가 하면 맨 처음에 설명했듯이 그냥 AnimatedController 사용해서 직접 애니메이션을 제작하면 된다. 음음
암튼 이렇게 알아보았는데 도움이 되었길 바라며 마치겠다.
