반응형
- 다음은 Flutter를 사용해 로그인 화면과 비밀번호 복구 화면을 구현하는 코드입니다.
- 이 코드는 이메일 및 비밀번호 입력에 대한 유효성 검사를 포함하며, 비밀번호 복구 화면으로 네비게이션하는 기능을 제공합니다.
dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: '로그인 화면',
theme: ThemeData(primarySwatch: Colors.blue),
home: LoginScreen(),
);
}
}
class LoginScreen extends StatefulWidget {
@override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
final _formKey = GlobalKey<FormState>();
final TextEditingController _emailController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
void _login() {
if (_formKey.currentState!.validate()) {
// 로그인 로직을 여기에 구현
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('로그인 성공')),
);
}
}
void _navigateToForgotPassword() {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ForgotPasswordScreen()),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('로그인'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 이메일 입력 필드
TextFormField(
controller: _emailController,
decoration: InputDecoration(
labelText: '이메일',
border: OutlineInputBorder(),
),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || value.isEmpty) {
return '이메일을 입력하세요';
}
if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
return '유효한 이메일 주소를 입력하세요';
}
return null;
},
),
SizedBox(height: 16),
// 비밀번호 입력 필드
TextFormField(
controller: _passwordController,
decoration: InputDecoration(
labelText: '비밀번호',
border: OutlineInputBorder(),
),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return '비밀번호를 입력하세요';
}
if (value.length < 6) {
return '비밀번호는 6자 이상이어야 합니다';
}
return null;
},
),
SizedBox(height: 16),
// 비밀번호 복구로 이동 버튼
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: _navigateToForgotPassword,
child: Text('비밀번호를 잊으셨나요?'),
),
],
),
SizedBox(height: 16),
// 로그인 버튼
ElevatedButton(
onPressed: _login,
child: Text('로그인'),
style: ElevatedButton.styleFrom(
minimumSize: Size(double.infinity, 48),
),
),
],
),
),
),
);
}
}
class ForgotPasswordScreen extends StatelessWidget {
final TextEditingController _emailController = TextEditingController();
void _resetPassword(BuildContext context) {
final email = _emailController.text;
if (email.isEmpty || !RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(email)) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('유효한 이메일 주소를 입력하세요')),
);
return;
}
// 비밀번호 복구 로직 구현
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('$email 로 비밀번호 복구 링크가 전송되었습니다')),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('비밀번호 복구'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'비밀번호를 복구하려면 이메일 주소를 입력하세요',
style: TextStyle(fontSize: 16),
textAlign: TextAlign.center,
),
SizedBox(height: 16),
TextField(
controller: _emailController,
decoration: InputDecoration(
labelText: '이메일',
border: OutlineInputBorder(),
),
keyboardType: TextInputType.emailAddress,
),
SizedBox(height: 16),
ElevatedButton(
onPressed: () => _resetPassword(context),
child: Text('비밀번호 복구'),
style: ElevatedButton.styleFrom(
minimumSize: Size(double.infinity, 48),
),
),
],
),
),
);
}
}
-
로그인 화면:
- 이메일과 비밀번호 입력 필드를 제공하며 유효성 검사를 통해 입력 데이터를 검증합니다.
- "로그인" 버튼으로 입력 데이터를 확인하고, 스낵바를 통해 결과를 보여줍니다.
- "비밀번호를 잊으셨나요?" 버튼을 통해 비밀번호 복구 화면으로 이동합니다.
-
비밀번호 복구 화면:
- 이메일 입력 필드와 유효성 검사 로직을 포함합니다.
- 입력된 이메일로 비밀번호 복구 요청을 처리하는 버튼을 제공합니다.
- Flutter로 간단하면서도 유효성 검사와 네비게이션이 포함된 로그인 및 비밀번호 복구 화면을 구현할 수 있습니다.
728x90
반응형
'Flutter Dart' 카테고리의 다른 글
다트(Dart) 프로젝트를 시작하기 위한 다양한 템플릿(template) 옵션 (0) | 2025.01.24 |
---|---|
Flutter 반복되지 않는 랜덤(Random) 확률 생성 (0) | 2025.01.23 |
Dart의 Isolate와 유사한 기능을 제공하는 언어 (0) | 2024.11.20 |
삼각형 내부 점 포함 검사 방법 및 최적화 방안 (0) | 2024.11.11 |
AdMob 테스트용 광고 ID 목록 (0) | 2024.10.16 |