반응형
청춘고양이
배움을 기록하는 곳
청춘고양이
전체 방문자
오늘
어제
  • Hello World (119)
    • JQuery (5)
    • In my opinion (4)
    • HTML&CSS (8)
    • JS (9)
    • JAVA (21)
    • Spring Boot (21)
    • Node.js (1)
    • Linux (7)
    • Git (2)
    • Kotlin (4)
    • Fluttor (4)
    • 정보처리기사 (19)
    • AWS (1)
    • Oracle (8)
    • MySQL (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • js
  • js 패스워드 변경
  • js 비밀번호
  • 자바
  • ScrollEffectJs
  • 제이쿼리 버튼클릭시 색 변경
  • css
  • 객체 안의 함수
  • js 로또 번호
  • 자바db연동
  • 쉬프트 연산
  • 제이쿼리 패스워드 변경
  • 중복 제거 로또
  • 제이쿼리 비밀번호
  • 가위바위보js
  • 제이쿼리
  • 스크롤js
  • 초보개발
  • 청춘고양이
  • spring 기본설정

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
청춘고양이
Fluttor

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

Fluttor

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

2024. 7. 1. 11:01
반응형

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

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

반응형
저작자표시 변경금지 (새창열림)

'Fluttor' 카테고리의 다른 글

플러터 클립보드 데이터 활용  (0) 2024.06.26
Flutter 프로젝트에 Firebase 연결  (0) 2024.06.25
Flutter에서 페이지 생성  (0) 2024.06.24
  • 1. 프로젝트 설정
  • Flutter 프로젝트 생성
  • Firebase 설정
  • 필요한 패키지 추가
  • 2. Firebase 초기화
  • 3. 로그인 페이지 구현
  • 4. 회원가입 페이지 추가
  • 5. 로그인 및 회원가입 페이지 연결
  • 마무리
'Fluttor' 카테고리의 다른 글
  • 플러터 클립보드 데이터 활용
  • Flutter 프로젝트에 Firebase 연결
  • Flutter에서 페이지 생성
청춘고양이
청춘고양이
신입개발자

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.