Skip to content

Connect Flutter to Firebase

  1. Pertama tama buat projek flutter dengan perintah : flutter create –org com.ngodingasyik [appname]1

2. Buka firebase console by going to console.firebase.google.com dan buat sebuah projek disana.

3. Lalu kita kembali ke firebase console lagi untuk mangaktifkan firebase authentication, pada tab sebelah kiri di firebase console, klik build dan klik authentication lalu klik get started. Lalu enable cara login yang anda mau pakai. Jika mau menambah cara login lagi , bisa klik tombol new provider di halaman authentication di pojok kanan atas.

4. Lalu aktifkan firestore database. di build-> firestore database -> create database ->pilih lokasi database (samakan seperti yang kita set sebelumnya) -> pilih di production mode -> create

5. Setelah selesai membuat proyek di firebase console, lalu buka folder proyek Anda di vs code, buka pubspec.yaml dan tekan F1 untuk menginstal dependensi : firebase_core, cloud_firestrore, firebase_auth dan simpan.

6. Bagaimana mensetup firebase credential untuk Android app yang akan kita buat. Pada versi firebase yang baru kita bisa menggunankan CLI. Pertama tama kita bisa install CLI-nya dulu. 

npm install -g firebase-tools

7. Lalu aktifkan Flutter CLI di project anda menggunakan perintah:

dart pub global activate flutterfire_cli

8. Perintah perintah ini dan selanjutnya ada di dokumentasi firebase di : https://firebase.flutter.dev/docs/cli/

9. Jika sudah aktif, akan terdapat tulisan “activated flutterfire_cli [version]” di terminal. Maka setelah itu kita sudah bisa menggunakan flutter CLI nya. Lalu kita menggunakan perintah :

flutterfire configure

Flutter fire configure ini memerintahkan FlutterFire CLI untuk mengekstrak informasi dari proyek Firebase Anda dan aplikasi proyek yang dipilih untuk menghasilkan semua konfigurasi untuk platform tertentu. Maka sebelum anda mengkonfigurasi proyek firebase anda, anda sudah harus membuat sebuah projek dulu di firebase console yang akan berasosiasi dengan proyek di VS code anda dan anda harus sudah login di firebase console anda, jika belum anda akan diminta untuk login.

10. Setelah anda menginput perintah “flutterfire configure” maka akan tampil beberapa pilihan projek yang ada di firebase console ada di terminal. Pilih salah satu yang akan berasosiasi dengan folder projek yang anda konfigurasikan disini. Untuk memilih tekan tombol panah atas atau bawah lalu enter pada pilihan anda.

11. Kemudian akan muncul pilihan beberapa platform yang akan kita konfigurasikan, platform disini adalah untuk memilih platform yang akan kita aktifin untuk kita buat, pilihannya ada “macos, android, ios dan web”, jika anda akan membuat aplikasi android maka bisa pilih android, jika android dan ios anda bisa mencentang android dan ios. untuk memilih disini anda bisa menekan spasi untuk select dan unselect. Setelah itu klik enter. Setelah enter, ini akan meregistrasikan pilihan anda di firebase console.

12. jika anda memilih ios, maka akan ada pertanyaan seperti “which bundle id do you want to use for this configuration? e.g com.example.app”, maka anda harus membuka xcode lalu “open project or file”, di projek folder anda , masuk ke ios -> Runner.xcodeproj, disana anda bisa melihat bundle id di bagian “Bundle identifier”, copy isi dari “bundle identifier” dan paste di terminal pada pertanyaan “which bundle id …”. Lalu klik enter, ini akan meregistrasi untuk aplikasi IOS.

13. Pada pengguna windows, jika memilih untuk android kita akan melewati step no 14 diatas dan akan mendapatkan file “firebase-options.dart” di folder lib kita, pada pilihan IOS, setelah step no 14 diatas, akan mendapatkan file yang sama pada folder lib projek kita. Kita sudah berhasil mendaftarkan projek kita di aplikasi flutternya. Jika kita buka firebase console kita ( bis refresh webbya), tampilannya akan berubah e.g dibawah nama aplikasi kita akan ada tulisan 1 atau 2 apps tergantung aplikasi yang kita daftarkan e.g ios atau android.

14. Next step adalah buka projek overview (pojok kiri atas) pada firebase console lalu pilih projek settings. Set lokasi server kita (pada default gcp resource location) lalu pilih server yang terdekat dengan lokasi kita.

15. (Pengguna IOS)Next,setelah server terinstall kita ke bagian public settings dibawah pemilihan server tadi lalu set “public-facing name” lalu ganti dengan nama projek kita, misalnya “my firebase” lalu klik save. Ini gunanya untuk kirim email, nama aplikasinya yang ke detect itu my firebase. Lalu set support email, bisa ke email anda.

16. Kita langsung ke SDK Setup and configuration, lalu tambahkan fingerprint. Di samping tulisan “SHA certificate fingerprints” ada icon tanda tanya , hover disitu lalu akan muncul tulisan “see this page”, klik disana dan ini akan membuka tab baru pada halaman : https://developers.google.com/android/guides/client-auth. Lalu ke di web tersebut

anda bisa memilih untuk windows atau IOS, lalu paste kode tersebut ke terminal. Nanti akan diminta password, passwordnya adalah “android” lalu klik enter lalu kita akan mendapatkan SHA 1 dan SHA256.

Pada kasus saya (windows), command diatas menghasilkan error.Mungkin juga menghasilkan pada sebagian komputer atau mungkin juga tidak, jika error anda bisa mencoba cara berikut, pada windows anda harus mengganti “%USERPROFILE%\.android\debug.keystore” dengan “$HOME/.android/debug.keystore” sehingga full kodenya menjadi seperti berikut : “keytool -list -v -alias androiddebugkey -keystore $HOME/.android/debug.keystore”. Ini saya temukan pada kalimat :

“The first time you run or debug your project in Android Studio, the IDE automatically creates the debug keystore and certificate in $HOME/.android/debug.keystore , and sets the keystore and key passwords” pada website ini.

17. Lalu kita copy isi dari SHA 1 dan SHA256, lalu kita balik lagi ke firebase console, pilih add fingerprint pada bagian SDK setup and configuration, akan muncul input field, pasto kode yang kita copy disana dan save. tambah satu lagi add fingerprint untuk menambahkan yang SHA256, prosesnya sama seperti pada SHA 1.

18. Kita kembali lagi ke Firestore database lalu klik rules, disini kita akan mensetup rules. Kita set rules menjadi true karena kalau masih false, datanya gak bakalan bisa dipakai (read dan wrirtenya masih false, jadi harus dibuat true).

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

Setelah itu kita kembali ke tab data.

19. Setelah itu kita ke tab storage ( build -> storage ) -> get started lalu pilih production, pilih server (sudah terpilih automatis) lalu done kemudian ke rules lalu setup false ke true agar bisa kita gunakan lalu publish.

20. Setelah di konsol sudah siap , lalu kita kembali ke website firebase.flutter.dev pada bagian Initialization. Paste kode berikut di main.dart

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

Lalu kita binding dengan kode berikut: 

WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform

Pada, setelah main dan sebelum runApp dan berikan asynchronous

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

Alternativenya bisa Copy code dibawah ke main.dart

import 'package:flutter/material.dart';

// Import the firebase_core plugin
import 'package:firebase_core/firebase_core.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(App());
}

/// We are using a StatefulWidget such that we only create the [Future] once,
/// no matter how many times our widget rebuild.
/// If we used a [StatelessWidget], in the event where [App] is rebuilt, that
/// would re-initialize FlutterFire and make our application re-enter loading state,
/// which is undesired.
class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  /// The future is part of the state of our widget. We should not call `initializeApp`
  /// directly inside [build].
  final Future<FirebaseApp> _initialization = Firebase.initializeApp();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      // Initialize FlutterFire:
      future: _initialization,
      builder: (context, snapshot) {
        // Check for errors
        if (snapshot.hasError) {
          return Text('error');
        }

        // Once complete, show your application
        if (snapshot.connectionState == ConnectionState.done) {
          return MaterialApp();
        }

        // Otherwise, show something whilst waiting for initialization to complete
        return Text('loading');
      },
    );
  }
}

jika Terdapat issuse : “Because firebase_core >=2.25.4 depends on firebase_core_web >=2.11.0 which requires SDK version >=3.2.0 <4.0.0, firebase_core >=2.25.4 is forbidden.”, maka solusinya adalah tekan F1 atau Ctrl+shift+P lalu pilih Flutter: Run flutter upgrade atau pada terminal rub “flutter upgrade”, jika ada masalah seperti muncul pesan berikut: “Unknown flutter tag. Abandoning upgrade to avoid destroying local changes. It is recommended to use git directly if not working on an official channel.” , maka jalankan “flutter upgrade –force” ini akan mengupgrade flutter anda serta dart anda.

dan Jika ada Pesan “1 dependency is constrained to a version that is older than a resolvable version” menunjukkan bahwa dalam proyek Flutter Anda, ada satu dependensi yang dibatasi pada versi yang lebih tua daripada versi yang bisa diselesaikan atau diperbarui. Ini berarti bahwa paket tersebut memiliki versi yang tidak kompatibel dengan versi paket lainnya yang Anda gunakan atau versi baru yang tersedia.

Untuk memperbaiki ini, Anda memiliki beberapa opsi:

  1. Edit pubspec.yaml: Anda dapat secara manual mengedit berkas pubspec.yaml untuk mengubah versi dependensi yang bermasalah tersebut. Ini memungkinkan Anda mengontrol versi mana yang Anda ingin gunakan, namun memerlukan Anda untuk mengetahui versi yang tepat dan kompatibel.
  2. Jalankan Perintah Upgrade: Alternatif lainnya adalah menjalankan perintah flutter pub upgrade --major-versions. Perintah ini akan mencoba memperbarui dependensi Anda ke versi utama terbaru yang kompatibel dengan semua dependensi lain di proyek Anda. Ini bisa berguna jika Anda ingin memastikan bahwa semua paket Anda diperbarui ke versi terbaru yang kompatibel satu sama lain.

21. Terakhir jangan lupa menambahkan multiDexEnabled true pada buildgradle di android/app/buildgradle di default confignya.

Leave a Reply

Your email address will not be published. Required fields are marked *