Flutter로 구현하는 로그인 및 비밀번호 복구 화면

Flutter로 구현하는 로그인 및 비밀번호 복구 화면

• 다음은 Flutter를 사용해 로그인 화면과 비밀번호 복구 화면을 구현하는 코드입니다.
• 이 코드는 이메일 및 비밀번호 입력에 대한 유효성 검사를 포함하며, 비밀번호 복구 화면으로 네비게이션하는 기능을 제공합니다.

전체 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),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

주요 기능 설명

1. 로그인 화면:

   • 이메일과 비밀번호 입력 필드를 제공하며 유효성 검사를 통해 입력 데이터를 검증합니다.
   • "로그인" 버튼으로 입력 데이터를 확인하고, 스낵바를 통해 결과를 보여줍니다.
   • "비밀번호를 잊으셨나요?" 버튼을 통해 비밀번호 복구 화면으로 이동합니다.

2. 비밀번호 복구 화면:

   • 이메일 입력 필드와 유효성 검사 로직을 포함합니다.
   • 입력된 이메일로 비밀번호 복구 요청을 처리하는 버튼을 제공합니다.

• Flutter로 간단하면서도 유효성 검사와 네비게이션이 포함된 로그인 및 비밀번호 복구 화면을 구현할 수 있습니다.

view raw Flutter.LogIn.Password.ko.md hosted with ❤ by GitHub