Setup Flutter and Firebase

ขั้นตอนการเซ็ตอัพโปรเจ็ค Flutter กับ Firebase

Flutter 2.10.4 | Dart 2.16.2 | DevTools 2.9.2

Create Flutter Project

1) สร้างโปรเจ็ค Flutter

flutter create flutter_firebase

Create Firebase Project

1) เข้าเว็บ https://con…

ขั้นตอนการเซ็ตอัพโปรเจ็ค Flutter กับ Firebase
Image description
Flutter 2.10.4 | Dart 2.16.2 | DevTools 2.9.2

Create Flutter Project

1) สร้างโปรเจ็ค Flutter

flutter create flutter_firebase

Image description

Create Firebase Project

1) เข้าเว็บ https://console.firebase.google.com แล้ว Add Project ใหม่

Image description

2) ตั้งชื่อโปรเจ็ค ผมใช้ชื่อว่า FlutterFirebase แล้วกดปุ่ม Continue

Image description

3) เลือก Enable Google Analytics for this project แล้วกดปุ่ม Continue

Image description

4) เลือกบัญชี Google Analytics account แล้วกดปุ่ม Create project เมื่อสร้างเสร็จแล้วให้กดปุ่ม Continue

Image description

Add iOS App

1) คลิ๊กที่ปุ่ม iOS เพื่อ Add app to project

Image description

2) เปิด Terminal เข้าไปใน flutter_firebase/ios ไดเร็กทอรี่ แล้วเปิดไฟล์ Runner.xcworkspace ด้วย Xcode

cd flutter_firebase
cd ios
open Runner.xcworkspace

Image description

3) ที่ Xcode คลิ๊ก Runner แล้วกีอปปี้ Bundle Identifier

Image description

4) กลับไปที่ Firebase นำ Bundle Identifier ไปวางไว้ที่ Apple bundle ID ตั้งชื่อ App nickname แล้วกดปุ่ม Register app

Image description

5) กดปุ่ม Download GoogleService-info.plist แล้วกดปุ่ม Next

Image description

6) Step 3 และ 4 กดปุ่ม Next ผ่านไปได้เลย ส่วน Step 5 ให้กดปุ่ม Continue to console

Image description

7) กลับไปที่ Xcode คลิ๊กขวาที่ Runner แล้วคลิ๊กที่ Add Files to “Runner”…

Image description

8) เลือกไฟล์ GoogleService-info.plist ที่ดาวน์โหลดมา แล้วกดปุ่ม Add

Image description

9) เปิดโปรเจ็ค flutter_firebase ด้วย VSCode เปิดไฟล์ ios/Podfile uncomment platform แล้วแก้เป็น 10.0

platform :ios, '10.0'

Image description

Add Android App

1) กลับไปที่ Firebase กดปุ่ม Add app แล้วเลือก Android icon

Image description

Image description

2) กลับไปที่ VSCode เปิดไฟล์ android/app/build.gradle แล้วก๊อปปี้ applicationId

Image description

3) กลับไปที่ Firebase นำ applicationId ไปวางไว้ที่ Android package name ตั้งชื่อ App nickname

Image description

4) ไปที่ Terminal เข้าไปใน flutter_firebase/android ไดเร็กทอรี่ รันคำสั่ง grablew แล้วก๊อปปี้โค้ด SHA1

./gradlew signingReport

Image description

5) กลับไปที่ Firebase นำ SHA1 ไปวางไว้ที่ Debug signing certificate SHA-1 แล้วกดปุ่ม Register app

Image description

6) กดปุ่ม Download google-services.json แล้วกดปุ่ม Next

Image description

7) Step 3 กดปุ่ม Next ผ่านไปได้เลย ส่วน Step 4 ให้กดปุ่ม Continue to console

Image description

8) กลับไปที่ VSCode เปิดไฟล์ android/build.gradle เพิ่ม classpath เข้าไปที่ dependencies (ตรวจสอบเวอร์ชั่นได้ที่ https://mvnrepository.com/artifact/com.google.gms/google-services?repo=google)

classpath 'com.google.gms:google-services:4.3.10'

Image description

9) เปิดไฟล์ android/app/build.gradle เพิ่ม apply plugin

apply plugin: 'com.google.gms.google-services'

Image description

10) แก้ minSdkVersion เป็น 21 และเพิ่ม multiDexEnabled ใน defaultConfig

minSdkVersion 21
multiDexEnabled true

Image description

11) เพิ่ม implementation ใน dependencies (ตรวจสอบเวอร์ชั่นได้ที่ https://mvnrepository.com/artifact/androidx.multidex/multidex)

implementation 'androidx.multidex:multidex:2.0.1'

Image description

12) ก๊อปปี้ไฟล์ google-services.json ที่ดาวน์โหลดมา ไปไว้ใน android/app

Image description

13) เปิด Terminal เข้าไปที่ flutter_firebase ไดเร็กทอรี่ แล้วติดตั้ง firebase_core package (ดูรายละเอียดได้ที่ https://pub.dev/packages/firebase_core)

flutter pub add firebase_core

Image description

14) ถ้าไปเปิดไฟล์ pubspec.yaml ดูก็จะเห็น firebase_core ที่ dependencies

Image description

Initialize Firebase

1) เปิดไฟล์ main.dart

  • เพิ่ม import firebase_core package
  • เพิ่ม async หลัง main()
  • เพิ่ม WidgetsFlutterBinding.ensureInitialized()
  • เพิ่ม Firebase.initializeApp()
import 'package:firebase_core/firebase_core.dart';

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

Image description

ติดตามผลงานได้ที่


Print Share Comment Cite Upload Translate
APA
codebangkok | Sciencx (2024-03-29T15:44:37+00:00) » Setup Flutter and Firebase. Retrieved from https://www.scien.cx/2022/03/26/setup-flutter-and-firebase/.
MLA
" » Setup Flutter and Firebase." codebangkok | Sciencx - Saturday March 26, 2022, https://www.scien.cx/2022/03/26/setup-flutter-and-firebase/
HARVARD
codebangkok | Sciencx Saturday March 26, 2022 » Setup Flutter and Firebase., viewed 2024-03-29T15:44:37+00:00,<https://www.scien.cx/2022/03/26/setup-flutter-and-firebase/>
VANCOUVER
codebangkok | Sciencx - » Setup Flutter and Firebase. [Internet]. [Accessed 2024-03-29T15:44:37+00:00]. Available from: https://www.scien.cx/2022/03/26/setup-flutter-and-firebase/
CHICAGO
" » Setup Flutter and Firebase." codebangkok | Sciencx - Accessed 2024-03-29T15:44:37+00:00. https://www.scien.cx/2022/03/26/setup-flutter-and-firebase/
IEEE
" » Setup Flutter and Firebase." codebangkok | Sciencx [Online]. Available: https://www.scien.cx/2022/03/26/setup-flutter-and-firebase/. [Accessed: 2024-03-29T15:44:37+00:00]
rf:citation
» Setup Flutter and Firebase | codebangkok | Sciencx | https://www.scien.cx/2022/03/26/setup-flutter-and-firebase/ | 2024-03-29T15:44:37+00:00
https://github.com/addpipe/simple-recorderjs-demo