로그인 기능 구현

Route 설정하기

initialRoute 프로퍼티는 앱의 시작점을 나타내는 route를 정의하고,

 routes 프로퍼티는 이용가능한 named route와 해당 route로 이동했을 때 빌드될 위젯을 정의한다.

참고로 home은 initialRoute랑 같기 때문에 둘이 동시에 쓰면 충돌한다. 

initialRoute를 쓰면 home은 쓰지 말자.

 

String으로만 해버리면 조금이라도 스펠링이 틀릴 시에 앱이 충돌이 날 수 있기 때문에 변수 선언 해준것으로 바꾸어주었다.

 

 

 

 

static을 변수 선언시에 써준 이유는 WelcomeScreen().id로 불러와주게 되면, 전체 Class가 더 불러와지기 때문에

메모리 효율에 있어서 별로 좋지 않다. static을 쓰게 되면 클래스내에서 딱 특정 property 값만 가져올 수 있다. 

 

 

Route에 대한 자세한 정보는 하단 링크 참조

https://flutter-ko.dev/docs/cookbook/navigation/named-routes

Named route로의 화면 전환

 

 

Flutter Outline : Nothing to show 밖에 안뜰 때

Dart Analysis에서 새로고침 버튼을 클릭하면 아래와 같이 잘 보인다.

 

 

 

.copyWith 속성 사용해보기

 

이는 위젯 속성값 변경을 도와준다. 

예를 들어 아래와 같이 kTextFieldDecoration이 있다면, 여기서 hintText 부분만 바꾸고 싶다면!

 

아래 코드와 같이 kTextFieldDecoration.copyWith(바꾸고 싶은 속성)와 같은 방식으로 작성하면 된다. 

 

 

https://api.flutter.dev/flutter/material/TextTheme/copyWith.html

copyWith method - TextTheme class - material library - Dart API

 

Flutter Firebase ios 연동하기 

 

1. 파이어 베이스에서 새로운 프로젝트를 만들어 준다.

2. Firebase 상단에 앱추가하기에서 ios+ 아이콘 클릭.  

3. ios 번들 ID 입력하기 

해당 Flutter 프로젝트에서 open in finder를 해준다. 

해당 폴더에서 Runner.xcodeproj 파란색 파일을 열어준다. 

상단에 Runner 탭을 클릭하고 Bundle Identifier를 변경해주고 

(예시로 com.회사이름.앱이름 이런 형태를 띄고있다.)

이를 복사하여 하단처럼Apple 번들 ID 탭에 기입하여 준다.

기입하고 앱등록 버튼을 누른다. 

완료가 되면 GoogleService-Info.plist를 다운로드 한다. 

 

Xcode에서 Runnder 폴더에 다운로드 받은 파일을 드롭다운 하고, 그러면 창이 하나 뜨는데,

거기서 Copy items if needed 와 Runner를 체크가 제대로 되었는지 확인하고 Finish 버튼을 누른다. 

 

 

Flutter 관련 dependencies 설치 

 

하단의 모든 명령어들을 Flutter 터미널에 입력하여 준다.

 $ flutter pub add firebase_core

$ flutter pub add firebase_auth

 $ flutter pub add cloud_firestore

pubspec.yaml 파일안에 잘 설치 되었는지 확인하고 상단에 Pub get을 클릭해주고 마무리 해준다. 

※ ios 에뮬레이터를 실행시켜주기 전에 주의할 점이 있다.

pod repo update

요거를 에뮬레이터 돌리기전에 꼭 업데이트해주자. 내가 지금 엄청 고생하고있다.

 

 

ios 시뮬레이터 키보드 띄우기

-> mac 기준 command + k

 

 

 

Firebase Auth instance 사용하기 

https://firebase.flutter.dev/docs/auth/usage/

Using Firebase Authentication | FlutterFire

https://funncy.github.io/flutter/2021/03/10/firebase-auth/

[Flutter] - Firebase Auth 정리

 

 

Firebase Route 사용하기

https://flutter-ko.dev/docs/cookbook/navigation/named-routes

Named route로의 화면 전환

https://security-nanglam.tistory.com/482

[Flutter] Navigator & Named Route"화면 전환의 시작"

 

No Firebase App has been created - call Firebase.initializeApp() 에러

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

main.dart에서 main함수에 위와 같이 수정해주면 해결된다. 

 

 

Spinner 구현

다음 하단의 패키지를 사용해서 구현해주었다. 

https://pub.dev/packages/modal_progress_hud_nsn

modal_progress_hud_nsn | Flutter Package

쓰기전에, body쪽에 위젯으로 감싸준다음에 저런식으로 코드를 작성하는게 중요하다. 

요런식으로 버튼을 눌렀을 때, 스피너 활성이 되고, 로그인이 되면 스피너를 꺼주는 방식을 setState를 통해서 구현하였다. 

 

 

Firestore 사용하기

https://firebase.flutter.dev/docs/firestore/usage/

Cloud Firestore | FlutterFire

// 실시간으로 데이터들 불러오는 코드
 void messageStream() async {
    await _firestore.collection('messages').snapshots().forEach((snapshot){
      for(var message in snapshot.docs){
        print(message.data());
      }
    });
 }

stream은 스시집에서 컨베이어 벨트와도 유사하다. 한번에 주문해서 한번에 받는것은 Future에 해당하고,

stream은 데이터가 전달되자마자 바로 받을 수 있게 하는 것이다. 새로운 데이터가 오자마자 우리는 인지를 하게된다. 

 

 

Stream 위젯으로 변환시켜 UI에 표시해주기

 

https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html

StreamBuilder class - widgets library - Dart API

setState를 통해 새로운 데이터가 들어올 때마다 업데이트 시켜준다.