AnimatedSwitcher 위젯을 다른 위젯으로 바꾸고 싶을 때

강의를 듣다가 위젯을 다른 위젯으로 바꿀 수 있는 위젯을 보았는데 강의 내용상 사라져야하는 내용이라 기록한다.

AnimatedSwitcher의 child의 위젯이 변경이 될 때 애니메이션을 쓰면서 변경을 할 수 있는데 변경 방법은 아래와 같다.

setState로 어떤 조건일 때 무엇으로 변경될지 명시를 해주기만 하면 AnimatedSwitcher가 차일드 위젯을 이펙트 있게 바꿔준다.


Widget signUpForm = SignUpForm();
Widget signInForm = SignInForm();
Widget currentWidget;

class _AuthScreenState extends State<AuthScreen> {
  
  void initState() {
    if (currentWidget == null) {
      currentWidget = signUpForm;
    }
    super.initState();
  }

Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Stack(children: [
            //애니메이티드 스위쳐 : 어떤 위젯을 몇초만에 바꿀것인가? -> 이걸 하려면 무조건 stful위젯으로 가야함
              AnimatedSwitcher(child: currentWidget, duration: duration),
              Container(
                  child: FlatButton(
                      onPressed: () {
                        setState(() {
                          // A instance is A class? => is 는 붕어빵이 어떤 틀로 만들어졌는지 알아보는것과 같다.
                          if (currentWidget is SignUpForm) {
                            currentWidget = signInForm;
                          } else {
                            currentWidget = signUpForm;
                          }
                        });
                      },
                      child: Text('go tosign'))),
    ])));
  }

좋은 웹페이지 즐겨찾기