[Flutter] 앱 레퍼런스 참고하여 Flutter로 화면 구현하기 2

구현할 화면

 

import 'package:flutter/material.dart';

void main() {
  runApp(const LoginApp());
}

class LoginApp extends StatelessWidget {
  const LoginApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const LoginPage(),
    );
  }
}

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFFFF9F6),
      appBar: AppBar(
        title: Text('로그인'),
        backgroundColor: Color(0xFFFFF9F6),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(30.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                 FlutterLogo(size: 100),
                 SizedBox(height: 40),
                TextField(
                  decoration: InputDecoration(
                    labelText: '이메일',
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(4.0),
                    ),
                    fillColor: Color(0xFFFEDDBD),
                    filled: true,
                    prefixIcon: Icon(Icons.email_outlined),
                  ),
                ),
                SizedBox(height: 20),
                TextField(
                  decoration: InputDecoration(
                    labelText: '비밀번호',
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(4.0),
                    ),
                    fillColor: Color(0xFFFEDDBD),
                    filled: true,
                    prefixIcon: Icon(Icons.lock_outline),
                  ),
                  obscureText: true,
                ),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Color(0xFF845318),
                    padding: EdgeInsets.symmetric(
                        horizontal: 35, vertical: 15),
                  ),
                  child: Text('로그인',  style: TextStyle(color: Colors.white),),
                ),
                SizedBox(height: 20),
                TextButton(
                  onPressed: () {},
                  child: Text('비밀번호를 잊으셨나요?' , style: TextStyle(color: Color(0xFF845318)),),
                ),
                SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('계정이 없으신가요?'),
                    TextButton(
                      onPressed: () {},
                      child: Text('회원가입', style: TextStyle(color: Color(0xFF845318)),),
                    ),
                  ],
                ),
                const Divider(), // 구분선 추가
                SizedBox(height: 20),
                ElevatedButton.icon(
                  onPressed: () {},
                  icon: Icon(Icons.g_mobiledata),
                  label: Text('Google로 로그인'),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Color(0xFFFEDDBD),
                    foregroundColor: Colors.black,
                    padding: EdgeInsets.symmetric(
                        horizontal: 40, vertical: 13),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}