Flutter 기초 2

 

로그인 진행 상황 추적하는 _SignUpFormState 클래스를 추가한다.

 

? 그런데 with 문이랑 같이 사용되는 SingleTickerProviderStateMixin 은 대체 뭘까?

-> 확인을 해 보니 TickerMode에 의해 정의된 대로 트리가 활성화 된 동안에만 틱 하도록 구성된 단일 티커를 제공한다고 한다.

-> 한 개의 AnimationController를 사용할 때만 사용하고 만약 다중 AnimationController를 사용한다면 이것이 아니라 TickerProviderStateMixin을 사용하라고 한다.

 

 

? progress == 1을 새로 선언한 변수에 할당하게 되는데, 이 문법은 뭐지?

-> progress가 입력들이 모두 유효한 값을 가지고 있을 때 1 값을 가지는 듯하다. 이 예제에 필요한 3가지 입력 칸 모두 찰 때만 제출버튼이 활성화 되는 것을 확인함

 

setState() 메서드를 호출하는 것은 flutter 에게 화면을 업데이트 해야 한다고 알려주는 것 과 같다.

 

 

(조건식 ? 참 : 거짓 ) 문법을 사용해서 Bool 변수에 따라 null 혹은 정상 환영페이지를 반환한다.

 

마지막으로 애니메이션을 추가한다.

앱이 시작되면 로그인 영역 상단에 작은 빨간색 막대가 나타납니다.

하나의 텍스트 필드에 텍스트가 포함 된 경우 빨간색 막대가 주황색으로 바뀌고 로그인 영역을 가로 질러 1/3 정도의 애니메이션이 나타납니다.

두 개의 텍스트 필드에 텍스트가 포함 된 경우 주황색 막대가 노란색으로 변하고 로그인 영역을 가로 질러 3 분의 2의 애니메이션이 나타납니다.

세 개의 텍스트 필드 모두에 텍스트가 포함 된 경우 주황색 막대가 녹색으로 바뀌고 로그인 영역 전체에 애니메이션이 적용됩니다. 또한 가입 버튼이 활성화됩니다.

 

이게 공식 문서에서 원하는 애니메이션들이다.

 

 

 

우선 AnimationController 변수와 Animation 변수를 이해해야 한다.

AnimationController 변수는 애니메이션 속도를 조절하는 구동부이다.

Animation 변수는 전체 애니메이션이라 생각하면 되겠다.

 

헌데 Animation 변수는 선언할 때 <Color> 가 붙어있는 것으로 보아서 Color를 기반으로 하는 Animation 이라 생각할 수 있다. colorTween 은 한 색상에서 다른 색상으로 이행하는 애니메이션을 위해서 따로 만든 클래스인 듯 하다. 종종 사용되는 애니메이션이라 따로 클래스를 만들어 놓은 듯.

 

구동부와 붙어있는 상세설정을 모두 모아서 colorAnimation 에 할당한다.

 

그리고 이 모든 것을 현재 메인 Column 위젯 child 리스트의 맨 위에 넣는다.

이때 AnimatedBuilder 라는 위젯의 내부에 할당하게 되는데, 이 내부 변수 animation에 다시 구동부인 animationController를 넣고, 다시 그 내부에서 LinearProgressIndicator를 리턴한다...

그 내부의 value 는 progress의 완료 정도를 리턴하는 것 일테니, 구동부 animationController의 value를 가져고,

valueColor의 경우 colorAnimation에서 가져오게 된다.

backgroundColor의 경우 colorAnimation 의 value를 가져오는데 Opacity를 덧붙여서 투명도를 설정한다.

 

 

?아니 valueColor는 왜 value로 안뽑음? 일관성이 없잖어;

-> 확인해보니 이것은 valueColor parameter의 경우엔, Animation<Color> 객체를 할당해야하기 때문. colorAnimation.value는 특정 컬러이기 때문에 안되는 듯 하다.

-> 아니 그러면 valueColor가 아니라 파라미터 이름이 애초에 Animation 이어야 하는거 아닌가? 개 헷갈리게 만들어놨네 ㅠ

 

그래서 이 과정을 모두 거치면 원래 만들어 놓았던 가입 폼 위에 붉은색 바가 투명하게 나오는 것을 확인할 수 있다.

 

물론 form을 모두 채워넣으면 signup 버튼이 활성화 되며, 위의 progressbar 또한 초록색으로 바뀐다.