Flutter - 로그인 관련2, 나누기, 소셜로그인 버튼

---

1. 로그인 버튼 만들어 주기

Flutter 2.0이 되면서 몇개의 버튼이 중요도가 사라지고 다른 버튼들로 바뀜
FlatButton, RaisedButton, OutlineButton 이 각각 TextButton, ElevatedButton, OutlinedButton 으로 바뀜
https://seosh817.tistory.com/56 참고

---

                    FlatButton (
                      onPressed: () {
                        // 원래 강의에서는 _formKey.currentState.validate() 인데 validate 에 밑줄이 처짐 왜그런지 모르겠음
                        // 그러나 !표가 들어가서 하니깐 정상 작동이 됨.... !가 null체크 인거 같음 그 체크를 위해 !표가 쓰이는 것으로 보임
                        // 확인 결과 flutter 2.0 이후 null saftey 로 되면서 적용 된것으로 보임
                        if(_formKey.currentState!.validate()){
                          print("모든 입력값이 올바르구나");
                        }
                      },
                      color: Colors.white54,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(_cornerRadius),
                      ),
                      padding: EdgeInsets.all(16),
                      child: Text("Login"),
                    ),

---

버튼 코드

color와 Shape로 모양을 만들어줌

onPressed에는 _formKey로 버튼 클릭시 위부분의 입력창에 상태를 확인 가능

validate시어도 . 앞에 !를 붙여서 null safety를 해줄 수 있음

---

                    TextButton(
                      onPressed: (){
                        if(_formKey.currentState!.validate()){
                          print("모든 입력값이 올바르구나");
                        }
                      },
                      /*style: ButtonStyle(
                        textStyle:
                        MaterialStateProperty.all(TextStyle(fontSize: 14)),
                        foregroundColor:
                        MaterialStateProperty.all(Colors.white),
                       ),*/
                      //https://seizemymoment.tistory.com/44
                      style: TextButton.styleFrom(
                        backgroundColor: Colors.white54,
                        primary: Colors.black, // foreground
                        padding: EdgeInsets.all(16),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(_cornerRadius),
                        ),
                      ),
                      child: Text("Login"),
                    ),

 

---

플랫 버튼과 똑같이 만든 textbutton임

 

2. 줄로 나누기 Divider

줄로 나눠서 보여줄때 사용

---

                    Divider(
                      // 패딩같은 걸 포함한 전체 높이
                      height: 33,
                      // 선만 나오는 color의 굵기
                      thickness: 1,
                      color: Colors.white54,
                      // 왼쪽 패딩
                      indent: 8,
                      // 오른쪽 패딩
                      endIndent: 8,
                    ),

---

이 강의는 비교적 간단하게 끝남

 

3. 소셜 로그인 버튼

 

로그인 버튼을 만들어 주기 위해 ButtonBar 를 만들어서 children에 여러 IconButton을 넣어서 만들어줌

---

IconButton(
  onPressed: (){},
  icon: ImageIcon(
  AssetImage('assets/google.png)
)

---

이 버튼은 자주 사용하기에 리팩터를 해줌. 다른 곳에서도 사용하면 위젯으로 이 페이지만 사용할것이면 메소드로 만들어 주면 됨. 만들어 준 후 주소와 버튼 동작은 따로 받아와 줘야함

---

  // 여기서만 사용하면 메소드로, 다른곳에서도 사용하면 위젯으로 빼주면 됨
  Container _buildSocialButton(String imagePath, Function()? onPressed) {
    return Container(
      // Container 높이 넓이는 강사가 미리 해보고 가장 최적화로 해둔 부분
                        width: 50,
                        height: 50,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(25),
                          color: Colors.white54,
                        ),
                        child: IconButton(
                          // https://devmemory.tistory.com/54
                          // 기존 상단 String imagePath 옆에 Function onPressed를 하여 onPressed: onPressed, 를 하였음
                          // 그러나 flutter 2.0 이후에는 The argument type 'Function' can't be assigned to the parameter type 'void Function()?
                          // 처럼 나오는것을 확인 가능
                          // Function을 현재처럼 Function()?로 변경하니 빨간줄 사라지고 정상 작동 null safety 때문인것으로 보임
                            onPressed: onPressed,
                            icon: ImageIcon(
                                AssetImage(imagePath)
                            ),
                        ),
                      );
  }

---

ButtonBar(
  children: [
  	_buildSocialButton('assets/google.png',(){}),
  	_buildSocialButton('assets/facebook.png',(){}),
    _buildSocialButton('assets/apple.png',(){}),
   ],
   alignment: MainAxisAlignment.center,
),

---

버튼바는 위와 같이 바꿔주면 정상적으로 버튼이 생기는것을 확인 가능

ButtonBar를 중앙 정렬을 위해 alignment를 추가해줌