[Flutter]TickerProviderStateMixin vs SingleTickerProviderStateMixin

한상욱·2024년 12월 31일
0

Flutter

목록 보기
27/29
post-thumbnail

들어가며

우리는 AnimationController나 TabController를 초기화하기 위하여 Stateful Widget에서 SingleTickerProviderStateMixin 또는 TickerProviderStateMixin을 사용하게 됩니다.

예를 들어, 이렇게 사용하게 됩니다.

_animationController = AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this);

두개의 mixin은 컨트롤러 초기화에서 vsync에 this를 전달하기 위해 꼭 필요합니다. 근데, 왜 필요할까요? 이번 글을 통해서 두개의 mixin과 애니메이션에 대해서 알아봅시다.

TickerProviderStateMixin

공식문서의 설명을 좀 보겠습니다.

"Provides Ticker objects that are configured to only tick while the current tree is enabled, as defined by TickerMode."

TickerMode에 정의된대로 현재 트리가 활성화되어 있는 동안 Ticker 객체를 제공한다고 합니다.

하단에는 아래와 같은 설명도 함께 있습니다.

"If you only have a single Ticker (for example only a single AnimationController) for the lifetime of your State, then using a SingleTickerProviderStateMixin is more efficient. This is the common case."

Ticker가 하나만 필요하다면 SingleTickerProviderStateMixin를 사용하는 것이 훨씬 효율적이라고 하네요. 그렇다면 이 친구는 뭐가 특별한걸까요??

SingleTickerProviderStateMixin

한번 공식문서 설명을 볼까요?

"Provides a single Ticker that is configured to only tick while the current tree is enabled, as defined by TickerMode.

...

This mixin only supports vending a single ticker. If you might have multiple AnimationController objects over the lifetime of the State, use a full TickerProviderStateMixin instead."

TickerProviderStateMixin과 동일한 역할을 하지만, 이 친구는 하나의 Ticker를 제공하므로 여러개의 AnimationController가 필요하다면 TickerProviderStateMixin을 사용하는 것이 좋다고 하네요.

사실, 이쯤 되니까 Ticker가 뭔지 좀 알아봐야 될 것 같습니다.

Ticker

"Calls its callback once per animation frame, when enabled."

활성화가 되면 프레임마다 콜백 호출을 한다고 합니다. 즉, Ticker는 애니메이션이 실행되는 동안 프레임마다 호출이되어 프레임속도와 동기화되도록 하는 역할을 합니다.

그렇다면 애니메이션을 담당하는 AnimationController는 대략적으로 한개의 Ticker가 필요합니다. 이러한 경우에는 SingleTickerProviderStateMixin만으로 충분히 효과적으로 Ticker를 제공할 수 있습니다.

만약, 여러개의 AnimationController를 사용하게 되는 경우에는 여러개의 Ticker가 각각 Controller에 할당되어야 하므로 TickerProviderStateMixin을 사용해야 되겠군요!

마무리하며

이로써, 두개의 mixin에 대한 차이와 Ticker에 대해서 알아보았습니다.

참고

https://ranveergour781.medium.com/singletickerproviderstatemixin-vs-tickerproviderstatemixin-139268027398

profile
자기주도적, 지속 성장하는 모바일앱 개발자가 되기 위해

0개의 댓글

관련 채용 정보