25.12.04
회원 가입 페이지(Register Screen) UI 구현 , 탈퇴 팝업 UI 개선 및 이미지 수정
This commit is contained in:
KIMGYEONGRAN
@@ -1,5 +1,6 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'main.dart';
|
||||
import 'register_screen.dart';
|
||||
|
||||
class LoginScreen extends StatefulWidget {
|
||||
const LoginScreen({super.key});
|
||||
@@ -15,7 +16,7 @@ class _LoginScreenState extends State<LoginScreen> {
|
||||
final FocusNode _idFocusNode = FocusNode();
|
||||
final FocusNode _pwFocusNode = FocusNode();
|
||||
|
||||
final Color mainBlueColor = const Color(0xFF007AFF);
|
||||
final Color mainBlueColor = const Color(0xFF0033CC);
|
||||
|
||||
bool _isIdFocused = false;
|
||||
bool _isPwFocused = false;
|
||||
@@ -45,90 +46,101 @@ class _LoginScreenState extends State<LoginScreen> {
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
body: SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Icon(Icons.polymer, size: 80, color: mainBlueColor),
|
||||
const SizedBox(height: 20),
|
||||
Text(
|
||||
'METAQLAB',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
color: mainBlueColor,
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold,
|
||||
letterSpacing: 1.2,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 60),
|
||||
|
||||
_buildCustomTextField(
|
||||
label: '아이디',
|
||||
controller: _idController,
|
||||
focusNode: _idFocusNode,
|
||||
isFocused: _isIdFocused,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
_buildCustomTextField(
|
||||
label: '비밀번호',
|
||||
controller: _pwController,
|
||||
focusNode: _pwFocusNode,
|
||||
isFocused: _isPwFocused,
|
||||
isObscure: true,
|
||||
),
|
||||
|
||||
const SizedBox(height: 40),
|
||||
|
||||
ElevatedButton(
|
||||
onPressed: () {
|
||||
String inputId = _idController.text;
|
||||
String inputPw = _pwController.text;
|
||||
|
||||
if (inputId == 'user' && inputPw == '1234') {
|
||||
print('로그인 성공!');
|
||||
Navigator.pushReplacement(
|
||||
context,
|
||||
MaterialPageRoute(builder: (context) => const HomeScreen()),
|
||||
);
|
||||
} else {
|
||||
print('로그인 실패');
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('아이디 또는 비밀번호가 틀렸습니다.'),
|
||||
backgroundColor: Colors.redAccent,
|
||||
duration: Duration(seconds: 2),
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: mainBlueColor,
|
||||
foregroundColor: Colors.white,
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
child: Center(
|
||||
child: SingleChildScrollView(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Image.asset(
|
||||
'assets/images/metaq_v.png',
|
||||
width: 86,
|
||||
height: 86,
|
||||
fit: BoxFit.contain,
|
||||
),
|
||||
elevation: 0,
|
||||
),
|
||||
child: const Text(
|
||||
'로그인',
|
||||
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 70),
|
||||
_buildCustomTextField(
|
||||
label: '아이디',
|
||||
controller: _idController,
|
||||
focusNode: _idFocusNode,
|
||||
isFocused: _isIdFocused,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_buildCustomTextField(
|
||||
label: '비밀번호',
|
||||
controller: _pwController,
|
||||
focusNode: _pwFocusNode,
|
||||
isFocused: _isPwFocused,
|
||||
isObscure: true,
|
||||
),
|
||||
const SizedBox(height: 40),
|
||||
ElevatedButton(
|
||||
onPressed: () {
|
||||
String inputId = _idController.text;
|
||||
String inputPw = _pwController.text;
|
||||
|
||||
const SizedBox(height: 20),
|
||||
TextButton(
|
||||
onPressed: () {},
|
||||
child: Text(
|
||||
'비밀번호 찾기 / 회원가입',
|
||||
style: TextStyle(color: mainBlueColor, fontWeight: FontWeight.w500),
|
||||
),
|
||||
if (inputId == 'user' && inputPw == '1234') {
|
||||
Navigator.pushReplacement(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => const HomeScreen()),
|
||||
);
|
||||
} else {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('아이디 또는 비밀번호가 틀렸습니다.'),
|
||||
backgroundColor: Colors.redAccent,
|
||||
duration: Duration(seconds: 2),
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: mainBlueColor,
|
||||
foregroundColor: Colors.white,
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
elevation: 0,
|
||||
),
|
||||
child: const Text(
|
||||
'로그인',
|
||||
style:
|
||||
TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
|
||||
ElevatedButton(
|
||||
onPressed: () {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => const RegisterScreen()),
|
||||
);
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Colors.white,
|
||||
foregroundColor: mainBlueColor,
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
side: BorderSide(color: mainBlueColor, width: 1.0),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
elevation: 0,
|
||||
),
|
||||
child: const Text(
|
||||
'회원가입',
|
||||
style:
|
||||
TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -144,7 +156,7 @@ class _LoginScreenState extends State<LoginScreen> {
|
||||
}) {
|
||||
return AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
border: Border.all(
|
||||
@@ -153,36 +165,27 @@ class _LoginScreenState extends State<LoginScreen> {
|
||||
),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
color: isFocused ? mainBlueColor : Colors.grey.shade600,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
child: TextField(
|
||||
controller: controller,
|
||||
focusNode: focusNode,
|
||||
obscureText: isObscure,
|
||||
decoration : InputDecoration(
|
||||
hintText: label,
|
||||
hintStyle: TextStyle(
|
||||
color: Colors.grey.shade400,
|
||||
fontSize: 16,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
TextField(
|
||||
controller: controller,
|
||||
focusNode: focusNode,
|
||||
obscureText: isObscure,
|
||||
decoration: const InputDecoration(
|
||||
isDense: true,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
border: InputBorder.none,
|
||||
focusedBorder: InputBorder.none,
|
||||
enabledBorder: InputBorder.none,
|
||||
),
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
color: Colors.black87,
|
||||
),
|
||||
cursorColor: mainBlueColor,
|
||||
),
|
||||
],
|
||||
isDense: true,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
border: InputBorder.none,
|
||||
focusedBorder: InputBorder.none,
|
||||
enabledBorder: InputBorder.none,
|
||||
),
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
color: Colors.black87,
|
||||
),
|
||||
cursorColor: mainBlueColor,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user