[플러터/firebase] signup 기능 구현하기

▪ flutter / firebase 연동하기

플러터와 firebase를 연동하는 방법은 쉬운 편입니다. 그런데, 전 오래 걸렸습니다 😑

firebase 콘솔에서 안드로이트 프로젝트를 새로 만들어주고 flutter 파일로 돌아와서 app 폴더속의 build.gradle 파일에 필요한 정보들을 넣어주면 됩니다. firebase문제가 상세하게 설명해주기 때문에 어려울게 없습니다. 모든 파일들 업데이트를 끝내고 오류메세지를 만났는데, flutter sdk버젼과 firebase 버젼이 상호가 안 되서였습니다. 이럴땐 

 

android > app > build.gradle 파일에 midSdkVersion과 targetSdkVersion을 아래와 같이 넣어주면 됩니다.

숫자만 더해주면 되는데 전 그걸 모르고 엄청 해맸습니다.

 defaultConfig {
        applicationId "com.example.chat_app"
        minSdkVersion 21
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        multiDexEnabled true
    }

 

 

 

▪ flutter / firebase 회원 가입 기능 

firebase와 연동이 끝났다면 이제 textformfield를 통해서 필요한 값을 받아서 회원 가입 기능을 구현해봅시다

아래와 같이 필요한 값들을 String 변수로 선언해줍니다.

class _LoginSignupScreenState extends State<LoginSignupScreen> {
  final _authentication = FirebaseAuth.instance;

  //선택되는 걸 표시하기 위한 것
  bool isSignupScreen = true;
  final _formKey = GlobalKey<FormState>();
  String userName = '';
  String userEmail = '';
  String userPassword = '';

 

그리고 아래와 같이 firebase 내장 method (createUserWithEmailAndPassword) 를 사용해서 email과 password를 등록합니다 그 아래에 위치한 newUser.user -> .user 역시 내장 method입니다. null 이 아니라면 chat page로 넘어가라는 명령을 넣어줍니다. 

 

                  child: GestureDetector(
                    onTap: () async {
                      if (isSignupScreen) {
                        _tryValidation();
                        try {
                          final newUser = await _authentication
                              .createUserWithEmailAndPassword(
                            email: userEmail,
                            password: userPassword,
                          );
                          if (newUser.user != null) {
                            Navigator.push(context,
                                MaterialPageRoute(builder: (context) {
                              return ChatScreen();
                            }));
                          }
                        } catch (e) {
                          print(e);
                          //error snackbar
                          ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(
                              content:
                                  Text('Please chenck your email and password'),
                              backgroundColor: Colors.blue,
                            ),
                          );
                        }
                      }
                    },

 

 

▪ firebase User 리스트 확인!

 

 

파이어베이스에서 회원가입된 email을 확인하실 수 있답니다