Setup Flutter and Firebase
Tags: flutter, firebase
Published: 2022-03-26 14:50:25

ขั้นตอนการเซ็ตอัพโปรเจ็ค Flutter กับ Firebase
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhtxuqj412728snht3xu.png)
Flutter 2.10.4 | Dart 2.16.2 | DevTools 2.9.2

## Create Flutter Project
1) สร้างโปรเจ็ค Flutter 
```
flutter create flutter_firebase
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uibfdfj78spx3lyx014.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/llpi9rrn90m513j4ieco.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e34vc1os3100x9kna469.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8oe9562cxwezsokdpq0.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5iywlmclegayg9bimk06.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xaoc5o3pblm2h4ifcd1.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8whtoblc5vhyr33044og.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6pi4rr8y41olr0cr6n2.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/legr1zz8yd3b107anwge.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihy94uv5f40k2kxt6duq.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8smqc6skdbnvds15eyfk.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbf8zmuvevqv7bmkjien.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lex3ukt0c0i0jllcbdod.png)

9) เปิด Terminal เข้าไปใน **ios** ไดเร็กทอรี่ แล้วรันคำสั่ง pod init จะได้ไฟล์ Podfile 
```
pod init
```

10) เปิดโปรเจ็ค **flutter_firebase** ด้วย **VSCode** เปิดไฟล์ **ios/Podfile** uncomment platform แล้วแก้เป็น 10.0
```
platform :ios, '10.0'
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqh44tq9ouyr0a1i5pxt.png)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbll0ekynco1qysaf26n.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ql82bv4vznpzbefh7zae.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fh26qsbdunyinfzjpm08.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehrpm9jqc4rpz5j2lx1j.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tngml78hdzufgjkq94q.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36qra9mhqldx90tno9ya.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3il22hwimz6zkc2lpc01.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a82jyomqf08utxds4bwc.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzixaduy2jtimv41977o.png)

9) เปิดไฟล์ **android/app/build.gradle** เพิ่ม apply plugin 
```gradle
apply plugin: 'com.google.gms.google-services'
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyyfyxwthlkbythd9cb5.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdm7mrx4959eoecoukli.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qmx4e7bjxla6dcc98qr.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jz83njy5f8q29dpbsnn.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adqz5o7edbqz4u97rqom.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aylf64x3x2sgdv56wqhj.png)

## Initialize Firebase 
1) เปิดไฟล์ **main.dart** 
- เพิ่ม import firebase_core package
- เพิ่ม async หลัง main()
- เพิ่ม WidgetsFlutterBinding.ensureInitialized()
- เพิ่ม Firebase.initializeApp()
```dart
import 'package:firebase_core/firebase_core.dart';

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1h89lj6llniic5gp7ow.png)

####ติดตามผลงานได้ที่
* **Page:** [https://fb.com/CodeBangkok​](https://fb.com/CodeBangkok​)
* **Group:** [https://fb.com/groups/msdevth​](https://fb.com/groups/msdevth​)
* **Blog:** [https://dev.to/codebangkok](https://dev.to/codebangkok)
* **YouTube:** [https://youtube.com/CodeBangkok](https://youtube.com/CodeBangkok)