[Flutter] 2. 회원가입, 로그인 만들어보기

백엔드의 'ㅂ'도 모르는 나는 플러터엔 firebase지! 하며 바로 firebase셋팅을 시작했다..

firebase_core: ^1.10.6
firebase_auth: ^3.3.4
cloud_firestore: ^3.1.5

먼저 pubspec.yaml 파일에 의존성 파일들 넣어주고 flutter fire cli를 사용하여 파이어베이스 연동을 시도했다.

https://firebase.flutter.dev/docs/cli/

CLI | FlutterFire

먼저 무슨 앱 아이디 같은걸 써줘야하는데 기본 값으로 하면 연동이 안되서 이름을 바꿔주었다.

이제 연동할 차례이다.

flutter fire configure로 firebase와 앱을 연동 해준다.

이미 firebase 콘솔에서 만들어 놨기 때문에 새로운 프로젝트를 생성하는 것이 아닌, 첫번째 걸로 선택해주었다.
플랫폼은 안드로이드와 ios로 선택했다.

다음과 같은 화면들이 나왔다면 firebase_option.dart와 부가적인 파일들이 로드된다 그럼 셋팅은 끝인거다 이제 나머지 UI와 부가적인것들을 셋팅해주자

일단 메인 포모도로 타이머는 로그인을 하지않아도 사용 가능하게 만들 생각이고, 분석 탭과 계정 탭은 로그인 후 진행 되도록 만들 생각이다.

이번 플러터 2.8 업데이트에 추가된 SignInScreen 위젯으로 만들면 매우 편하게 구현이 가능하다길래 일단 사용해 보았다. 이 기능을 사용하려면 Flutter fire ui가 필요하다 -> https://pub.dev/packages/flutterfire_ui 

main.dart에는

요런식으로 initalize 될 수 있도록 써줘야한다 (필수)

이후 이제 EmailProviderConfiguration을 SignInScreen함수에 넣고 실행하면 다음과 같은 화면이 나온다.

그리고 붉으스름한 저 색상 자체를 그냥 white로 가버리기로 결정했다.

바뀐 메인 화면이다.

로그인 기능까지 구현된 모습이다.

 

//dart 기본 패키지
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

//dart firebase
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutterfire_ui/auth.dart';

class accountPage extends StatelessWidget {
  const accountPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox.expand(
      child: StreamBuilder(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot){
          if(!snapshot.hasData){
            return SignInScreen(providerConfigs: [
              EmailProviderConfiguration()
            ]);
          }
          return ListView(
            children: [
              TextButton(onPressed: (){
                FirebaseAuth.instance.signOut();
              }, child: Text('로그아웃'),),
            ],
          );
        },
      )
    );
  }
}

class settingPage extends StatelessWidget {
  const settingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}