[027] 플러터 (Flutter) 배우기 - 애니메이션 만들기1 (AnimatedContainer 사용)

안녕하세요~ totally 개발자입니다.

 

AnimatedContainer

 

오늘 다뤄볼 부분은 AnimatedContainer을 사용해서 컨테이너의 크기 또는 색상이 변할 때 애니메이션을 입히는 방법입니다. 바로 예제를 살펴보도록 하겠습니다.

 

Step 1: 초기 width(가로길이)와 height(세로길이), color(색상)을 변수로 만들어주겠습니다.

 

Step 2: AnimatedContainer 위젯으로 애니메이션을 입힐 Container 위젯을 만들어주고 변화를 줄 속성에 조금 전에 선언했던 변수들을 전달해줍니다. duration에는 몇 초로 설정할 것인지, curve에는 어떤 방식의 애니메이션 효과를 적용할 것인지 선택해서 입력하면 됩니다.

 

Step 3: 애니메이션을 할 수 있도록 요소들을 변경할 수 있는 버튼 및 값들을 넣어줍니다.

저는 버튼을 누를 때 컨테이너의 크기와 색상을 변경하도록 했습니다. 

 

예제 코드의 시뮬레이터를 통한 결과는 아래와 같습니다.

 

시뮬레이터로 확인해본 모습

 

[전체 소스 코드]