컴포넌트 제작기- 회원가입

로그인을 만들었으니깐 회원가입은 당연히 만들어야겠죠?ㅋㅋ

먼저 저번에 만들어둔 로그인 폼 밑에다가 회원가입으로가는 버튼을 만들어두고.

그리고 심플하게 회원가입 위젯을 만들어봅니당

그냥 넘어가버리면 조금 심심하니깐 조금 다른 라우터 애니메이션을 지정해서 이뿌게 만들어봅시당

페이지 라우터에다가 트랜지션을주면 원래에 push pop 애니매이션과 다른 트랜지션을 사용할수있습니다.

거기에다가 페이지가 마운트되면 회원가입 텍스트와 인풋박스에 애니매이션을 재생하면 해당효과를 얻을수있습니다.

• 페이지 라우터 선언

return PageRouteBuilder(
        pageBuilder: (context, animation, secondaryAnimation) =>
        child
        , transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return func(child,animation);
    });

• 애니매이션 추가

static Widget _fade(Widget child,animation){
    var tween = Tween(begin: 0.0, end: 1.0,).chain(
        CurveTween(curve: Curves.ease));
    return FadeTransition(opacity: animation.drive(tween),child: child);
  }

• WidgetBinding...을사용해서 마운트되자마자 애니매이션 실행

WidgetsBinding.instance!.addPostFrameCallback((_) {
      _controller.forward().whenComplete(() => _nextController.forward());
    })

• 첫번째 애니매이션이 실행이완료된뒤. 콜백을 사용해서 두번째 애니매이션 실행

페이지 라우터 애니매이션을 사용하면 push pop 할때 자동으로 forward,reverse됩니다.

그리고 버튼에다가는 입력이되지않았을경우에 비활성

이메일 확인은 아직 추가안했답니다

그리고 다음으로 넘어갈때 이번에도 같은 이펙트면 재미가 없으니깐... 다른 이펙트로

조금느린건.. 디버그할땐 빨라보이길래.. 다시줄여야겠다

무튼 다른이펙트를 사용해서다음으로 넘어가고.. 마지막으로 추가 정보!

이건 입력 안해도 넘어갈수있게 버튼비활성 조건을 지워주고.. 남자여자 선택쪽은 호버나 스플래시가 없었으면 좋겠어서 container 위에 gesturedector로 그냥 바로 감싸버리니깐 깔끔하게 나오는것같다.

근데 에뮬레이터랑 실제기기랑.. 사이즈차이가 너무난다..

애초에 반응형으로 만들어야되나.?

고럼 이만