Flutter TickerProviderStateMixin

Animation 을 만들때, TabBar를 만들때 필수로 사용하게 되는

TickerProviderStateMixin 클래스에 대해서 알아보자

---

먼저 공식 문서를 살펴보자

https://api.flutter.dev/flutter/widgets/TickerProviderStateMixin-mixin.html

TickerProviderStateMixin mixin - widgets library - Dart API

 

 

공식 문서를 보면 ‘현재 트리가 활성화 되어 있을때만 Tick하게 한다.

AnimationController를 사용하는 클래스에 mixin 되어 진다. 라고 설명되고 있다.

TabBar를 가만히 생각해보자 페이지를 바꿀때 혹은 Tab을 바꿀때를 보면 자연스럽게 Tab을 가르키고 있는 indicator가 애니메이션을 한다.

 

 

 

 

TabBarView도 마치 android 의 viewPage 처럼 부드럽게 애니메이션을 한다.

그렇다. Tab를 컨트롤 해야하는 위젯에서는 애니메이션을 위해서 TickerProviderStateMixin 를 사용해야 한다.

 

 

 

 

DefaultTabController를 사용할때는 제외 하고 말이다.

왜냐하면 DefaultTabController는 이미 TickerProviderStateMixin을 가지고 있기 때문이다.

 

 

 

TabBar와 TabBarView를 분리해서 원하는 UI를 꾸미고 싶을때 이때는 DefaultTabController 로 감싸주는 대신 TabController를 별도로 생성해서 각 TabBar와 TabBarView를 연결해야 하기 때문에 별도로 TickerProviderStateMixin를 mixin해줘야 한다.

 

 

 

 

Flutter는 공식적으로 초당 60프레임을 랜더링 한다.

랜더링 되는 프레임에 맞춰 위젯들의 애니메이션을 표현하기 위해서 TickerProviderStateMixin이 사용 되어 지고 있다.

 

 

 

그런 특징으로 애니메이션이 이루어지는 동안 바뀌면 안되는 것들이 있다.

그것이 바로 TabController이다. TabController에서 하는 기본적인 세팅은 tab의 갯수 인데 TabController의 생성은 initState()에서 해야 한다.

 

 

 

애니메이션이 진행되는 동안 TabController의 변경을 허락한다면 UI가, 프로그램이 엉망이 될것이기 때문이다.

그래서 TabController의 생성은 initState()에서 한다. build()에서는 할 수 없다.

 

 

 

지금 tabbar예제를 만들었다면 build() 메소드 안에서 TabController생성코드를 넣어보자. 

build() 메소드 안에서 사용할 수 없다는 에러 메시지가 쏟아질 것이다. 

왜 build()메소드 안에서 TabController를 생성할 수 없는지 이해가 되는가? 

 

 

 

 

이렇게 한걸음 더 flutter의 세계에 빠져 보자!!