[Flutter] Flutter로 메인 페이지, 로그인 페이지 구현하기

혜진·2025년 4월 28일

flutter

Flutter

목록 보기

6/6

1. Main Page

메인 페이지는 사용자가 처음 앱을 실행했을 때 보게 되는 화면으로, 메인 페이지에서 할 수 있는 주요 기능은 로고 표시와 로그인 페이지로 이동하는 버튼 구현이다.

앱의 로고를 화면 중앙에 배치
로그인 페이지로 이동하는 버튼 추가
버튼 클릭 시 로그인 페이지로 이동하는 Navigator 사용

ElevatedButton(
  onPressed: _navigateToLoginPage,
  child: const Text('Go to Login'),
)

Google 로그인, Kakao 로그인, Naver 로그인을 구현할 수 있다.

Google 로그인 버튼과 Kakao 로그인 버튼, Naver 로그인 버튼을 세로로 배치
각 버튼에 로고 추가

ElevatedButton(
  onPressed: _handleGoogleLogin,
  child: Row(
    children: [
      Image.asset('assets/google_logo.png', width: 24, height: 24),
      const Text('Google 로그인'),
    ],
  ),
)

메인 페이지에서 로그인 페이지로 이동할 수 있는 네비게이션 기능
Navigator.push를 사용하여 버튼 클릭 시 로그인 페이지로 이동

4. Design and Styling

ElevatedButton을 사용하여 버튼의 색상, 크기, 모양 등을 설정하고, Image.asset을 사용하여 로고를 추가한다.

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Color(0xFFAE90E4), // 버튼 색상
    foregroundColor: Colors.white, // 텍스트 색상
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12), // 둥근 모서리
    ),
  ),
  onPressed: _handlePingMeLogin,
  child: Row(
    children: [
      Image.asset('assets/images/logo/app_icon.png', width: 46, height: 46),
      const Text('Ping Me 로그인'),
    ],
  ),
)