Bu yazımda, Flutter uygulamalarınızı Firebase’e nasıl bağlayacağınızı göstereceğim. Firebase, yönetilebilir bir arka uç hizmetidir (backend service). Firebase bizlere bir çok harika hizmet sunar. Bunlar;

• Veri Depolama / Veritabanı
• Dosya Depolama
• Doğrulama (Authentication)
• Anlık Bildirim Hizmeti
• Analytics ve daha fazlası…

Ek olarak makalenin sonunda bonus olarak basit bir veri okuması yapacağız. Şimdi uygulamaya geçelim.

Flutter uygulaması Cloud Firestore’a nasıl bağlanır?

1.) Yeni bir flutter uygulaması oluşturun.

2.) pubspec.yaml dosyasına cloud_firestore ve firebase_core eklentilerine yükleyip kaydedin.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3
  firebase_core: ^0.7.0
  cloud_firestore: ^0.16.0+1

Not: Bu paket sürümü, bu makaleyi okurken güncellenmiş olabilir, lütfen her zaman en son sürümü yükleyin.

Uygulamanızı Android’de geliştiriyorsanız, cloud_firestore eklentisini ekledikten sonra uygulamanın derlemeye devam etmesi için minSdkVersion‘ı 21’e yükseltmemiz gerekir.

android / app / build.gradle dizinini açın.

    defaultConfig {
// note that our app id will vary, based on how you named your application
        applicationId "com.example.flutter_firebase_demo"
        minSdkVersion 21
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

3.) Varsayılan arayüzü güncelleyin. main.dart dosyasını aşağıdaki kodla değiştirin.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase Kurulumu',
      home: Scaffold(
        body: ListView.builder(
          itemBuilder: (ctx, idx) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('I Love Flutter'),
            );
          },
          itemCount: 10,
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {},
        ),
      ),
    );
  }
}

Her şeyin düzgün çalıştığından emin olmak için uygulamanızı çalıştırın. 10 adet metin göreceksiniz.

4.) Bir firebase projesi oluşturun.

• Firebase hesabınıza giriş yapın ve konsola gidin..
• Firebase konsolunda proje ekle deyin.
• Firebase projeniz için bir ad girin ve devam et deyin.
• Analytics kullanmayacağımızdan, devre dışı bırakabilir ve ardından “Proje Oluştur” u tıklayabilirsiniz.
• Oluşturma bittiğinde devama tıklayın.

5.) Platforma özel Firebase yapılandırması

Windows makinesinde çalıştığım için, aşağıdaki talimatlar android uygulamanızı firebase kullanacak şekilde yapılandırmanıza yardımcı olacaktır. Ancak, İOS ​​için yapı oluşturuyorsanız , yapılandırmak için bu siteyi kullanın.

Uygulamanız bu noktada hala çalışıyorsa, uygulamayı durdurun. ( 3.) )

• Projeye Genel Bakış bölümünde, android uygulaması eklemek için android simgesini tıklayın.

Android / app / build.gradle dizinini açın ve applicationId‘yi kopyalayın ve android paket adı olarak kullanın.

• “Uygulamayı Kaydet” e tıklayın.
• Yapılandırma dosyasını indirin ve android / app klasörüne kopyalayın.
• Sonraki deyip, Firebase SDK ekleyin bölümüne gelin. Burada proje düzeyinde ve uygulama düzeyinde build.gradle dosyanıza eklemeniz gerekenler için talimatları yerine getirin.

Firebase Proje Düzeyinde ;

proje_dosyaniz>android>build.gradle dizininde gradle dosyasındaki dependencies bölümüne görselde işaretlenmiş yeri ekleyin.

Firebase Uygulama Düzeyinde ;

proje_dosyaniz>android>app>build.gradle dizininde gradle dosyasına belirtilen kısımları ekleyin.

• İşlemleri tamamladığınızda”İleri” ve ardından “Konsola Geç” butonuna tıklayın.

6.) Cloud Firestore Veritabanınızı oluşturun.

• Konsolunuzda, sol gezinme bölmesinde “Cloud Firestore” u ve ardından “Veritabanı Oluştur” u tıklayın.
• “Test Modunu” seçin ve ileri deyin. Daha sonra “etkinleştir”e tıklayın.
• Veritabanınızda “yeni bir koleksiyon başlat” a tıklayın. Cloud firestore’daki veriler belgelerden oluşan koleksiyonlar halinde yapılandırılır.
• “Koleksiyonunuzu adlandırın” ve ileriye tıklayın
• Bir belge ekleyin, otomatik olarak kimlik oluşturmak için otomatik kimliği seçin. Bir alan ekleyin ve değer verin. Açılır menüden türünü seçebilirsiniz

• Belge ekle’ye tıklayarak iki belge daha ekleyin.

7.) Flutter uygulamanızı Cloud Firestore’a bağlayın.

Main.dart dosyanızda kodunuzu gösterildiği gibi güncelleyin.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

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

Yukarıdaki kodda, firebase_core eklentisini içe aktarıyoruz ve firebase uygulamamızı başlatıyoruz.

Tam Kod:

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase Kurulumu',
      home: Scaffold(
        body: ListView.builder(
          itemBuilder: (ctx, idx) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('I Love Flutter'),
            );
          },
          itemCount: 10,
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {},
        ),
      ),
    );
  }
}

8.) Uygulamanızın veritabanınıza başarıyla bağlanıp bağlanmadığını test edin.

• Test etmek için butonun onPressed işlevini güncelleyin.

floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            FirebaseFirestore.instance.collection('olusturdugunuz_koleksiyonun_adi').snapshots().listen((
                data) {
              print(' length : ${data.docs.length}');
            });
          },
        ),

Not: Hata verirse import 'package:cloud_firestore/cloud_firestore.dart'; ekleyin.

Tam Kod:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase Kurulumu',
      home: Scaffold(
        body: ListView.builder(
          itemBuilder: (ctx, idx) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('I Love Flutter'),
            );
          },
          itemCount: 10,
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            FirebaseFirestore.instance
                .collection('olusturdugunuz_koleksiyonun_adi')
                .snapshots()
                .listen((data) {
              print(' length : ${data.docs.length}');
            });
          },
        ),
      ),
    );
  }
}

Bonus:

Makalenin başında bahsettiğim gibi basit bir veri okuması yapalım. MyApp sınıfını aşağıdaki kod ile değiştirin ve uygulamanızı çalıştırın.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase for Flutter Demo',
      home: Scaffold(
        body: StreamBuilder(
          stream:  FirebaseFirestore.instance.collection('olusturdugunuz_koleksiyonun_adi').snapshots(),
          builder: ( BuildContext ctx, AsyncSnapshot<QuerySnapshot> snapshot){
            if(snapshot.connectionState == ConnectionState.waiting){
              return Center(child: CircularProgressIndicator(),);
            }
            final documents = snapshot.data.docs;
            return ListView.builder(
              itemBuilder: (ctx, idx) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(documents[idx].data()['alan_adi']),
                );
              },
              itemCount: documents.length,
            );
          },
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {

          },
        ),
      ),
    );
  }
}

Yukarıdaki kodda;

stream:FirebaseFirestore.instance.collection('olusturdugunuz_koleksiyonun_adi').snapshots(), kodu bulun ve ilgili yere oluşturduğunuz koleksiyonun adını yazın.

child: Text(documents[idx].data()['alan_adi']), buradaki ilgili yere oluşturduğunuz belgenin alanını yazın. Ör: 6. adımda ben sehir isminde bir alan oluşturdum ve değerine ‘istanbul’ yazdım.

Yukarıdaki kodu kendime göre çalıştırdığımda uygulamanın anasayfasında değerin çıktısını yani ‘istanbul’ yazısını göreceğim.