[Flutter] 인스타그램 클론(7) - Login Page UI 작성

오늘은 이전 포스팅에 이어 Login Page의 UI 디자인을 해 보았습니다.

 

 

이전 포스팅은 스마트폰의 갤러리에서 이미지를 불러오는 것으로 아래에서 확인을 해 보실 수 있습니다.

2020/08/10 - [프로젝트/[Flutter] 인스타그램 클론] - [Flutter] 인스타그램 클론(6) - 갤러리 사진 불러오기

[Flutter] 인스타그램 클론(6) - 갤러리 사진 불러오기

 

 

<1. pubspec.yaml에 flutter_signin_button 추가하기>

pubspec.yaml에 flutter_signin_button: ^0.2.5를 추가해줍니다.

해당 패키지는 구글, 페이스북 등의 기존 프로그램과 연동하여 로그인하는 버튼을 사용할 수 있도록 해 주는 패키지입니다. 추가한 후 3. 번으로 표시한 패키지 추가까지 해 줍니다.

 

 

 

<2. Login Page 코드 작성>

로그인 페이지는 프로젝트 진행 초기에 만들어두었던 파일 login_page.dart파일에 위와 같이 코드를 추가해줍니다.

 

 

 

 

 

<3. Root Page에서 Login Page 수행하게 수정>

Root Page에서 기존에 작업하던 내용인 로그인 상황을 가정하여 나타나는 Tab Page대신에 Login Page가  나타나도록 수정하였습니다. 로그인 페이지를 사용할 수 있도록 Import 해주고, Login Page를 반환합니다.

 

 

 

 

 

 

 

 

<4. Login Page 수행 화면>

수행 화면은 위와 같지만 아직 구글로 로그인하는 버튼이 추가되지도 않았고 텍스트가 중앙에 오도록 작업을 해 보겠습니다.

 

 

 

 

<5. 소스 수정>

위에서 말한 중앙으로 텍스트를 배치하기 위해 칼럼의 정렬을 중앙으로 설정하였습니다.

적당한 간격을 두기 위해 패딩을 사용하였고, 그리고 그 아래에 구글로 로그인하는 버튼을 추가하기 위해 SignInButton을 구글 버튼을 추가하고, OnPressed의 내용을 null로 아무것도 없이 두면 Error가 발생하므로, 아무 기능도 하지 않지만 눌리고 빌드가 될 수 있도록 빈 함수의 형태로 만들어줍니다.

 

 

 

<6. 수정사항 반영 확인>

수정된 내용을 확인해보면 위와 같습니다.

 

 

 

이상으로 Login Page UI 디자인을 마치겠습니다.