Flutter에서는 애니메이션의 진행 상태를 감지하고 이에 따른 작업을 수행하는 것이 중요합니다. 특히, 애니메이션이 시작되거나 끝났을 때 특정 작업을 수행해야 할 때 애니메이션 컨트롤러에 콜백 함수를 등록하여 이를 처리할 수 있습니다.

이번 게시물에서는 Flutter의 AnimatedBuilder를 사용하여 애니메이션의 진행 상태에 따른 콜백 함수 활용 방법을 살펴보겠습니다.

애니메이션 컨트롤러에 콜백 함수 등록하기

애니메이션 컨트롤러에서는 addListener() 함수를 사용하여 애니메이션 진행 중에 콜백 함수를 등록할 수 있습니다. 이 콜백 함수는 애니메이션의 값이 변경될 때마다 호출됩니다.

아래는 예시 코드입니다.

AnimationController _controller;
Animation<double> _animation;

@override
void initState() {
  _controller = AnimationController(
    duration: Duration(seconds: 2),
    vsync: this,
  )..addListener(() {
    // 애니메이션이 진행 중일 때 수행할 작업
  });

  _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
  super.initState();
}

위의 코드에서는 AnimationController에 addListener() 함수를 사용하여 애니메이션이 진행 중일 때 수행할 작업을 등록했습니다.

AnimatedBuilder를 활용한 애니메이션 콜백 함수

때로는 애니메이션의 진행 상태에 따라 Widget을 다시 빌드해야 하는 경우가 있습니다. 이때 AnimatedBuilder를 사용하면 애니메이션의 값이 변경될 때마다 Widget을 다시 빌드할 수 있습니다. AnimatedBuilder를 통해 콜백 함수를 등록하면 애니메이션의 값이 변경될 때마다 수행할 작업을 구현할 수 있습니다.

아래는 예시 코드입니다.

@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: _controller,
    builder: (context, child) {
      // 애니메이션 값이 변경될 때마다 수행할 작업
      return Container();
    }
  );
}

위의 코드에서는 AnimatedBuilder를 사용하여 애니메이션 값이 변경될 때마다 수행할 작업을 구현했습니다.

결론

Flutter에서는 AnimatedBuilder를 활용하여 애니메이션의 진행 상태에 따른 콜백 함수를 간편하게 등록할 수 있습니다. 이를 통해 애니메이션의 진행 상태를 감지하고 이에 따른 UI 업데이트 등을 처리할 수 있습니다.

이상으로 Flutter에서 애니메이션 진행 상태에 따른 콜백 함수 활용 방법에 대해 알아보았습니다.

다른 문의가 있으실 경우 언제든지 물어보세요!