Flutter - 로그인 가입 전환 토글, 페이지 정렬, 버튼 누를 때 나타내기와 숨기기, 메인 페이지로 가기

1. 로그인 부분과 가입 부분 탭 토글 만들기

ButtonBar를 만들고 그 안에 flatbutton 2개 만들어서 TextStyle 로 fontWeight나 color을 줘서 bool 값을 하나 만들고 if를 반대로 하여 토글 값으로 하여 스타일을 다르게 준다.

flutter은 TextButton으로 만든다

---

                    ButtonBar(
                      children: [
                        FlatButton(
                          onPressed: (){
                            setState(() {
                              isRegister = false;
                            });
                          },
                          child: Text(
                            "Login",
                            style: TextStyle(
                                fontSize: 18,
                                fontWeight: isRegister?FontWeight.w400:FontWeight.w600,
                                color: isRegister?Colors.black45:Colors.black87
                            ),
                          ),
                        ),
                        FlatButton(
                          onPressed: (){
                            setState(() {
                              isRegister = true;
                            });
                          },
                          child: Text(
                            "Register",
                            style: TextStyle(
                                fontSize: 18,
                                fontWeight: isRegister?FontWeight.w600:FontWeight.w400,
                                color: isRegister?Colors.black87:Colors.black45
                            ),
                          ),
                        ),
                      ],
                    ),

---

어떤 버튼이 활성화 상태인지 알기 위해서 class 내 상단에 bool로 상태를 알 수 있는 변수를 만들어 준다.

---

bool isRegister = true;

---

2. 전체 레이아웃 아래로 정렬

ListView의 옵션중 reverse를 ture로 하여 아이템들을 밑에서 부터 쌓이게 할 수 있지만 모든 아이템이 반대로 됨. 이부분을 위해 children: []의 [](list) 부분을 .reversed.toList()로 거꾸로 넣게 하면 아래에 붙으면서 reverse를 2번했기때문에 밑정렬인것 처럼 나오게 된다. 채팅의 형태에 도움이 된다.

---

reverse: ture,

children: [].reversed.toList(),

---

3. Login 일때 Confirm Password 창 숨기고 Register 일 때 나타내기

Confirm Password 창을 AnimatedContainer로 감싸준다. AnimatedContainer은 애니메이션을 간단히 할 수 있게 만드는 위젯이다. 이 속도를 위해 class내 상단에 Duration 으로 애니메이션 속도를 조절 할 수 있다.

---

Duration _duration = Duration(milliseconds: 250);

---

효과를 주기 위해서 curve 를 줄 수 도 있다.

---

Curve _curve = Curves.fastOutSlowIn;

---

그 위의 SizedBox도 없애줘야 보기에 좋기 때문에 AnimatedContainer로 바꿔준다.

---

                    AnimatedContainer(
                      height: isRegister ? 8 : 0,
                      duration: _duration,
                      curve: _curve,
                      child: Text(""),
                    ),
                    //AnimatedContainer 은 아주 만능의 Magic 위젯 애니메이션을 간단히 구현 가능
                    AnimatedContainer(
                      height: isRegister ? 60 : 0,
                      duration: _duration,
                      curve: _curve,
                      child: _buildTextFormField("Confirm Password", _cPasswordController),
                    ),

---

3. 메인페이지로 가기

login,register 버튼의 onPressed에 

---

Provider.of<PageNotifier>(context, listen: false,).goToMain();

---

해당 코드를 넣어주면 메인페이지를 이동 할 수 있다.

그러나 로그인시에도 confirm password에 값이 없어서 로그인을 눌러도 _formKey 체크가 안되서 작동이 안한다.

이 부분을 위해서 validator 부분에 추가를 해준다.

controller 부분이 confirm password 이고, isRegister 일때 동작 해야 한다. 그리고 text가 null이 아니어야 한다.

로그인 클릭 상태일 때는 confirm password 만 확인을 안하면 된다.

---

                      if(controller != _cPasswordController && (text==null || text.isEmpty)){
                        return "입력창이 비어있어요.";
                      }
                      if(controller == _cPasswordController && isRegister && (text==null || text.isEmpty)){
                        return "비밀번호 확인부분을 다시 입력 하세요!!";
                      }

---

위와 같은 코드로 작성 할 수 있다.

다만, 암호와 확인 부분이 같은지에 대한 부분이 없다 이 부분은 스스로 학습 해봐야 한다.