안녕하세요~ totally 개발자입니다. Firebase Authentication 오늘 알아볼 부분은 Firebase Authentication 인증 관련 내용입니다. 이 Authentication를 사용하여 이메일 인증, 휴대전화 인증 등을 간단하게 구축할 수 있습니다. Step 1: 콘솔 -> 프로젝트 들어가신 뒤 Authentication를 눌러줍니다. Step 2: 아래에 시작하기 버튼을 클릭해줍니다. Step 3: 이메일/비밀번호 부분을 선택해줍니다. Step 4: 다음처럼 사용 설정 해주시고 저장해줍니다. Step 5: 플러터 코드를 작성해줍니다. 예제에 사용한 파일은 총 4개입니다. (main.dart, login.dart, signup.dart, home.dart) [main.dart] ..

안녕하세요~ totally 개발자입니다. Firebase & Flutter 연동 오늘은 플러터와 파이어베이스를 서로 연동하는 방법에 대해 살펴보도록 하겠습니다. Step 1: 파이어베이스 웹사이트에 접속하셔서 구글 아이디로 로그인 하신 뒤, 콘솔로 이동해줍니다. Step 2: 기존에 프로젝트 만드신 것이 있다면 그 프로젝트로 가시면 되고, 새로 만들어야 한다면 프로젝트 추가 버튼 눌러주시면 됩니다. 저는 기존에 JavaScript 용도로 파이어베이스 프로젝트를 생성한 적이 있어서 새로 프로젝트 만들지 않고 여기에서 앱 추가 버튼을 눌러주면 다음 스크린샷처럼 Flutter를 선택할 수 있습니다. 먼저 firebase CLI를 https://firebase.google.com/docs/cli?authuser..

안녕하세요~ totally 개발자입니다. Form, validator, TextFormField, Navigator.pushNamed의 매개변수 전달해서 다른 클래스에서 받기 Form, validator, TextFormField를 사용해서 잘 제출되었을 때 다른 페이지로 넘어갈 수 있는 예제를 살펴 보도록 하겠습니다. 플러터에서는 Form 위젯을 제공하여 양식을 만들 수 있습니다. 그리고 TextFormField를 사용하여 autoFocus, validator, onSaved 등 여러가지 속성을 같이 활용할 수 있습니다. Step 1: MaterialApp 부분에 home 부분을 주석 처리해주시고 initialRoute와 routes를 다음처럼 정의해주도록 합니다. 이 routes 정의를 통해 push..

안녕하세요~ totally 개발자입니다. flutter_webview 오늘 구현해볼 부분은 플러터 웹뷰(flutter webview)입니다. 이 웹뷰를 사용하여 웹사이트를 그대로 모바일 어플에서 보여질 수 있도록 구현할 수 있습니다. Step 1: pubspec.yaml 파일에 이 3줄을 추가해줍니다. webview_flutter, webview_flutter_android, webview_flutter_wkwebview Step 2: 다음처럼 import 해줍니다. Step 3: Android는 sdk 버전 최소 19이상 ios는 11이상이라고 가이드 문서에 나와 있습니다. android/app/build.gradle android { defaultConfig { minSdkVersion 19 } } ..

안녕하세요~ totally 개발자입니다. flutter_local_notifications 오늘은 앱에서 푸시 알림을 보내는 방법에 대해 살펴보겠습니다. 플러터 패키지인 flutter_local_notifications를 명시해서 설치한 후 사용하면 됩니다. Step 1: pubspec.yaml에 다음처럼 등록해줍니다. Step 2: 프로젝트경로/android/app/src/main/AndroidManifest.xml에 다음을 추가해줍니다. android:showWhenLocked="true" android:turnScreenOn="true" Step 3: 프로젝트경로/ios/Runner/AppDelegate.swift에 다음을 Bool { } 내에 추가해줍니다. if #available(iOS 10.0..

안녕하세요~ totally 개발자입니다. GetX - Reactive State Manager 저번 시간에는 Simple State Manager에 대해 살펴보았고, 이번 시간에는 Reactive State Manager에 대해 살펴보도록 하겠습니다. Simple State Manager에서는 GetBuilder와 update 메소드를 통해 UI를 업데이트해주었던 반면, Reactive State Manager에서는 Data Stream처럼 데이터를 주기적으로 관찰(Observe)하여 데이터가 변경된 경우에 UI를 실시간으로 업데이트해줍니다. 여기서 알아야 할 몇 가지 키워드가 있는데 Rx는 ReactiveX이고, Obs는 Observable입니다. 이 GetX Reactive State Manager의..