Flutter[플러터] / AnimatedBuilder 를 사용하여 값 변경 시 렌더링 하기 (controller, 컨트롤러, 애니메이티드 빌더) AnimatedBuilder (Flutter Widget of the Week)

AnimatedBuilder class

애니메이션을 만드는 데 사용되는 일반 위젯입니다.

AnimatedBuilder는 더 큰 빌드 함수의 일부로 애니메이션을 포함하려는 더 복잡한 위젯에 유용합니다. AnimatedBuilder를 사용하려면 위젯을 생성하고 빌더 함수를 전달해야 합니다.

추가 상태가 없는 간단한 경우에는 AnimatedWidget 을 사용하는 것을 고려하세요.

https://youtu.be/N-RiyZlv8v8

이름과 달리 AnimatedBuilder는 Animation 에만 국한되지 않습니다. 모든 하위 유형 (예: ChangeNotifier 또는 ValueNotifier )을 사용하여 리빌드를 트리거할 수 있습니다. 구현 방식은 동일하지만, Animation을 수신 대기하지 않는 경우 가독성을 높이기 위해 ListenableBuilder를 사용하는 것이 좋습니다.

공식 문서 코드

 

---

AnimatedBuilder 는 애니메이션 값이 바뀔 때마다 UI 를 다시 렌더링 하고 싶을 때 사용하는 위젯이다. AnimationController 를 기반으로 크기, 위치, 투명도 등을 동적으로 조정할 수 있다. 주로 사용되는 곳은 setState() 같이 직접 호출 없이 자동으로 관리를 원할 때 사용한다. 또한 달려 있는 child 속성을 통해 애니메이션과 관련이 없는 부분은 재렌더링 없이 고정해서 사용할 수도 있다.

기본적으로 사용하는 코드 구조는 이렇게 된다.

AnimatedBuilder(
  animation: animationController, // 필수
  builder: (context, child) {
    return Transform.rotate(
      angle: animationController.value * 2 * pi,
      child: child,
    );
  },
  child: Icon(Icons.refresh), // animation과 무관한 자식 위젯 (필요 시)
)

 

이렇게 사용 자체는 굉장히 간단하게 사용할 수 있다. 하지만 이제 초보자라면 이 AnimationController 부터 막힐 수밖에 없는데 쉽게 설명해 주겠다.

AnimationController

 

AnimationController 는 애니메이션을 직접 제어할 수 있도록 도와주는 핵심 클래스이다.

주요 특징으로는

1. 직접 시작, 정지, 반복, 되감기 등의 컨트롤이 가능
2. 애니메이션의 현재 진행값(value)을 가져올 수 있음
3. TickerProvider 를 통해 프레임 단위로 동작함

기본적으로 생성자를 작성해줘야 하고 선언도 해줘야 하는데 밑의 코드처럼 기본적으로 설정을 해줘야 한다.

class _TestState extends State<Test> with TickerProviderStateMixin { // 꼭 넣기
  late final AnimationController animationController = AnimationController(
    vsync: this, // 필수
    duration: Duration(seconds: 2), // 시간은 필요하지 않다면 설정 하지 않아도 OK
  );

 

반드시 State 에서 TickerProviderStateMixin 또는 SingleTickerProviderStateMixin 을 with 로 제공해 줘야 한다.

이렇게 제공해줘야 AnimationController 생성자 안에서 vsync 안에 this 가 들어가 있는 여기에서 this 가 State 를 가리키고 있는 것이기 때문에 이걸 (TickerProviderStateMixin) 가져오게 되는 것이다.

 

이렇게 late final (굳이 final 은 바뀔 거라면 붙일 필욘 없음)로 선언한 AnimationController 의 생성자 안에 본인이 넣고 싶은 기능을 넣어 주면 되는 것이다. 이것이 AnimationController 를 사용하는 기본이다.

또한 주의할 점은 반드시 dispose() 를 호출해서 선언해놓은 animationController 를 해제시켜야 메모리가 누수 방지 된다.

@override
void dispose() {
  animationController.dispose(); // 이거 작성
  super.dispose();
}

---

그럼 이제 공식 예제 코드를 한번 살펴보자.

late final AnimationController _controller = AnimationController(
  duration: const Duration(seconds: 10),
  vsync: this,
)..repeat(); // 반복 함수

이렇게 작성되어 있는데 아주 간단한 코드이다. 기본적으로 애니메이션컨트롤러를 사용하려고 선언을 한 모습이고 그 안에서 10초라는 시간을 먹여주고 있다. 그리고 끝나는 지점에서 cascade 문법을 사용하여 반복 함수인 repeat을 호출해주고 있는 모습이다. 그렇다면 이 코드는 무엇을 나타내는가? 그렇다 10초 동안 애니메이션을 줄건데 그 10초동안 주는 애니메이션을 무한 반복하는 코드인 것이다. 그리고 그 10초 동안의 애니메이션은 build 안에서 선언되어 있다.

builder: (BuildContext context, Widget? child) {
  return Transform.rotate(angle: _controller.value * 2.0 * math.pi, child: child);
},

위에서 controller: animation 을 해놨기 때문에 지금 이 빌더는 컨트롤러를 사용하고 있는 중이고 controller.value 를 사용하여 컨트롤러 값을 회전하는 것에다가 사용하는 모습이다.

 

이렇듯 처음 보면 당황스럽지만 막상 코드를 봐보면 굉장히 쉬운 것이 이 AnimatedBuilder 이자 AnimationController 이다. 이 위젯들을 잘 사용하면 앱이 정말 풍성해지니 애니메이션을 넣는 것을 한번 고려해 보자. 도움이 되었길 바라며 마치겠다.