Konfigurasi Flutter + Firebase (Android, Ios, Web)

Kali ini kita akan belajar bersama tentang bagaimana melakukan konfigurasi Flutter + Firebase multiplatform, yuk langsung aja

Membuat Project

1. Check Flutter versi

flutter --version

2. Buat Flutter project “flutter create crossplatformapp”

flutter create crossplatformapp

3. Masuk ke dalam project yang baru kita buat

cd crossplatformapp

4. Bila menggunakan visual studio code silahkan ketikkan

code .

Testing Project

1. Buka simulator yang akan dicoba

2. Check via terminal, untuk memastikan bahwa device ready

flutter devices

3. Kita bisa mencoba menggunakan command berikut (Sesuaikan dengan device yang ada di komputer masing masing)

flutter run -d "iPhone 12 Pro Max"

flutter run -d "Android SDK built for arm64"

Membuat Firebase Project

1. Add project baru

2. Berikan nama project

3. Klik next sampai create

Firebase iOS

1. Pilih iOS

2. Kita akan mengisi informasi berikut

3. Untuk mengisi iOS bundle ID, kita butuh bantuan xcode, masuk ke folder ios dalam flutter project kita lalu ketikkan

xed .

4. Klik runner, bisa kita lihat di bagian Bundle Identifier

5. Klik register

6. Download dan drag file (Gunakan Xcode saat drag file)

7. Inisiasi pod

8. Tambahkan code yang dibutuhkan

9. Lakukan pod install

10. Tambahkan Inisiasi Code, lalu next sampai finish

Firebase Android

1. Tambah app, lalu pilih android

2. Informasi nama package bisa kita temukan di bawah ini

3. Klik register

4. Download lalu move ke folder sesuai dengan dibawah ini

5. Sesuaikan kode dibawah, dan perhatikan lokasinya, apakah di project level folder atau app level folder

Untuk tambahan, ubah sdk menjadi : minSdkVersion 21 (minSDKVersion16 sering bermasalah)

Lalu continue sampai selesai

Firebase Web

1. Tambah pada firebase, dan pilih web, lalu pilih register

2. Tambahkan code berikut di html project

3. Untuk step berikutnya opsional, asumsi saat ini adalah kita akan coba untuk test hosting, maka lakukan command dibawah via terminal pada root folder project flutter kita

firebase init

4. Sebelum publish, kita harus build versi web dengan menggunakan command dibawah

flutter build web

5. Hasilnya kita bisa lihat di folder build

6. Ubah konfigurasi firebase.json

7. Deploy ke firebase hosting

firebase deploy

Hasil Akhir

Selamat, aplikasi multiplatform sudah ready.