Flutter로 로그인 페이지 구현하기

Flutter를 사용하여 아름답고 기능적인 로그인 페이지를 만드는 방법을 배워보세요. 이 포스팅에서는 Firebase Authentication을 사용하여 이메일과 비밀번호를 통해 로그인하는 방법을 다룹니다.

1. 프로젝트 설정

Flutter 프로젝트 생성

먼저 Flutter 프로젝트를 생성합니다.

flutter create login_demo
cd login_demo

Firebase 설정

Firebase 프로젝트를 생성하고, Firebase Authentication을 설정합니다. 프로젝트의 android 및 ios 폴더에 google-services.json 및 GoogleService-Info.plist 파일을 추가합니다.

필요한 패키지 추가

pubspec.yaml 파일에 Firebase 관련 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest_version
  firebase_auth: latest_version
  cloud_firestore: latest_version

패키지를 설치합니다.

flutter pub get

2. Firebase 초기화

main.dart 파일에서 Firebase를 초기화합니다.

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'login_page.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Login Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoginPage(),
    );
  }
}

3. 로그인 페이지 구현

login_page.dart 파일을 생성하고, 로그인 페이지 UI를 구현합니다.

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController emailController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  // 로그인 함수
  Future<void> signIn() async {
    try {
      await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: emailController.text,
        password: passwordController.text,
      );
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomePage()),
      );
    } on FirebaseAuthException catch (e) {
      print('Failed with error code: ${e.code}');
      print(e.message);
    }
  }

  @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: [
            TextField(
              controller: emailController,
              decoration: InputDecoration(
                labelText: '이메일',
              ),
            ),
            TextField(
              controller: passwordController,
              decoration: InputDecoration(
                labelText: '비밀번호',
              ),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: signIn,
              child: Text('로그인'),
            ),
          ],
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('홈 페이지'),
      ),
      body: Center(
        child: Text('로그인 성공!'),
      ),
    );
  }
}

4. 회원가입 페이지 추가

register_page.dart 파일을 생성하고, 회원가입 페이지를 구현합니다.

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  final TextEditingController emailController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  // 회원가입 함수
  Future<void> register() async {
    try {
      await FirebaseAuth.instance.createUserWithEmailAndPassword(
        email: emailController.text,
        password: passwordController.text,
      );
      Navigator.pop(context);
    } on FirebaseAuthException catch (e) {
      print('Failed with error code: ${e.code}');
      print(e.message);
    }
  }

  @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: [
            TextField(
              controller: emailController,
              decoration: InputDecoration(
                labelText: '이메일',
              ),
            ),
            TextField(
              controller: passwordController,
              decoration: InputDecoration(
                labelText: '비밀번호',
              ),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: register,
              child: Text('회원가입'),
            ),
          ],
        ),
      ),
    );
  }
}

5. 로그인 및 회원가입 페이지 연결

로그인 페이지에서 회원가입 페이지로 이동할 수 있도록 버튼을 추가합니다.

ElevatedButton(
  onPressed: signIn,
  child: Text('로그인'),
),
TextButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => RegisterPage()),
    );
  },
  child: Text('회원가입'),
),

마무리

이제 Flutter와 Firebase를 사용하여 기본적인 로그인 및 회원가입 페이지를 구현했습니다. 이 프로젝트를 확장하여 사용자 인증, 비밀번호 재설정, 이메일 확인 등의 기능을 추가할 수 있습니다.

여러분의 프로젝트에 이 포스팅이 도움이 되길 바랍니다! 질문이나 피드백이 있다면 댓글로 남겨주세요.