Flutter için Firebase'i tanıyın

1. Başlamadan önce

Bu codelab'de, Android ve iOS için Flutter mobil uygulamaları oluşturmak üzere Firebase'in bazı temel özelliklerini öğreneceksiniz.

Ön koşullar

• Flutter hakkında bilgi
• Flutter SDK'sı
• Seçtiğiniz bir metin düzenleyici

Neler öğreneceksiniz?

• Flutter ile Android, iOS, web ve macOS'te etkinlik LCV'si ve misafir defteri sohbet uygulaması oluşturma.
• Kullanıcıların kimliklerini Firebase Authentication ile doğrulama ve verileri Firestore ile senkronize etme

Gerekenler

Aşağıdaki cihazlardan herhangi biri:

• Bilgisayarınıza bağlı ve geliştirici moduna ayarlanmış fiziksel bir Android veya iOS cihaz.
• iOS simülasyon aracı (Xcode araçları gerektirir).
• Android emülatörü (Android Studio'da kurulum gerektirir).

Ayrıca şunlara da ihtiyacınız vardır:

• Google Chrome gibi istediğiniz bir tarayıcı.
• Android Studio veya Visual Studio Code gibi Dart ve Flutter eklentileriyle yapılandırılmış, tercih ettiğiniz bir IDE veya metin düzenleyici.
• Flutter'ın en son stable sürümü veya yenilikleri denemeyi seviyorsanız beta sürümü.
• Firebase projenizi oluşturmak ve yönetmek için bir Google Hesabı.
• Firebase CLI, Google Hesabınızda oturum açmış olmalıdır.

2. Örnek kodu alın

Projenizin ilk sürümünü GitHub'dan indirin:

1. Komut satırından GitHub deposunu flutter-codelabs dizinine klonlayın:

git clone https://github.com/flutter/codelabs.git flutter-codelabs

flutter-codelabs dizini, bir dizi codelab'in kodunu içerir. Bu codelab'in kodu flutter-codelabs/firebase-get-to-know-flutter dizinindedir. Dizin, projenizin her adımın sonunda nasıl görünmesi gerektiğini gösteren bir dizi anlık görüntü içerir. Örneğin, ikinci adımda olduğunuzu düşünelim.

2. İkinci adım için eşleşen dosyaları bulun:

cd flutter-codelabs/firebase-get-to-know-flutter/step_02

İleri sarmak veya bir adımın ardından nasıl görüneceğini görmek istiyorsanız ilgilendiğiniz adımın adını taşıyan dizine bakın.

Başlangıç uygulamasını içe aktarma

• flutter-codelabs/firebase-get-to-know-flutter/step_02 dizinini tercih ettiğiniz IDE'de açın veya içe aktarın. Bu dizinde, henüz işlevsel olmayan bir Flutter buluşma uygulamasından oluşan codelab'in başlangıç kodu yer alır. Uygulamayı IDE'nizde açtığınızda, 4. adımda düzeltilecek olan derleme zamanı hatalarını görürsünüz.

Üzerinde çalışılması gereken dosyaları bulma

Bu uygulamadaki kod birden fazla dizine yayılmış durumda. Bu işlev ayrımı, kodu işlevlere göre gruplandırdığı için çalışmayı kolaylaştırır.

• Aşağıdaki dosyaları bulun:
  • lib/main.dart: Bu dosya, ana giriş noktasını ve uygulama widget'ını içerir.
  • lib/home_page.dart: Bu dosya, ana sayfa widget'ını içerir.
  • lib/src/widgets.dart: Bu dosya, uygulamanın stilini standartlaştırmaya yardımcı olacak birkaç widget içerir. Bu widget'lar, başlangıç uygulamasının ekranını oluşturur.
  • lib/src/authentication.dart: Bu dosya, Firebase e-posta tabanlı kimlik doğrulama için oturum açma kullanıcı deneyimi oluşturmaya yönelik bir widget grubuyla kimlik doğrulama özelliğinin kısmi bir uygulamasını içerir. Kimlik doğrulama akışıyla ilgili bu widget'lar henüz başlangıç uygulamasında kullanılmıyor ancak yakında eklenecek.

Uygulamanın geri kalanını oluşturmak için gerektiğinde ek dosyalar eklersiniz.

lib/main.dart dosyasını inceleyin

Bu uygulama, Roboto'yu uygulamanın tamamında varsayılan yazı tipi yapmak için google_fonts paketinden yararlanır. fonts.google.com adresini ziyaret edebilir ve burada keşfettiğiniz yazı tiplerini uygulamanın farklı bölümlerinde kullanabilirsiniz.

lib/src/widgets.dart dosyasındaki yardımcı widget'ları Header, Paragraph ve IconAndDetail biçiminde kullanırsınız. Bu widget'lar, HomePage bölümünde açıklanan sayfa düzenindeki dağınıklığı azaltmak için yinelenen kodu ortadan kaldırır. Bu, tutarlı bir görünüm ve tarz da sağlar.

Uygulamanızın Android, iOS, web ve macOS'teki görünümü:

3. Firebase projesi oluşturma ve ayarlama

Etkinlik bilgilerinin gösterilmesi konuklarınız için harika bir özellik olsa da tek başına pek kullanışlı değildir. Uygulamaya bazı dinamik işlevler eklemeniz gerekiyor. Bunu yapmak için Firebase'i uygulamanıza bağlamanız gerekir. Firebase'i kullanmaya başlamak için bir Firebase projesi oluşturup ayarlamanız gerekir.

Firebase projesi oluşturma

1. Google Hesabınızı kullanarak Firebase konsolunda oturum açın.
2. Yeni bir proje oluşturmak için düğmeyi tıklayın ve ardından bir proje adı girin (örneğin, Firebase-Flutter-Codelab).
   
3. Devam'ı tıklayın.
4. İstenirse Firebase şartlarını inceleyip kabul edin ve Devam'ı tıklayın.
5. (İsteğe bağlı) Firebase konsolunda yapay zeka yardımını etkinleştirin ("Firebase'de Gemini" olarak adlandırılır).
6. Bu codelab için Google Analytics'e ihtiyacınız yoktur. Bu nedenle, Google Analytics seçeneğini devre dışı bırakın.
7. Proje oluştur'u tıklayın, projenizin hazırlanmasını bekleyin ve ardından Devam'ı tıklayın.

Firebase projeleri hakkında daha fazla bilgi edinmek için Firebase projelerini anlama başlıklı makaleyi inceleyin.

Firebase ürünlerini ayarlama

Uygulama, web uygulamalarında kullanılabilen aşağıdaki Firebase ürünlerini kullanır:

• Kimlik doğrulama: Kullanıcıların uygulamanızda oturum açmasına olanak tanır.
• Firestore: Yapılandırılmış verileri buluta kaydeder ve veriler değiştiğinde anında bildirim alır.
• Firebase Güvenlik Kuralları: Veritabanınızı korur.

Bu ürünlerden bazıları özel yapılandırma gerektirir veya Firebase konsolunda etkinleştirmeniz gerekir.

E-posta ile oturum açma kimlik doğrulamasını etkinleştirme

1. Firebase konsolunun Proje genel bakışı bölmesinde Oluştur menüsünü genişletin.
2. Kimlik doğrulama > Başlayın > Oturum açma yöntemi > E-posta/Şifre > Etkinleştir > Kaydet'i tıklayın.

Firestore'u ayarlama

Web uygulaması, sohbet mesajlarını kaydetmek ve yeni sohbet mesajları almak için Firestore'u kullanır.

Firebase projenizde Firestore'u nasıl ayarlayacağınız aşağıda açıklanmıştır:

1. Firebase konsolunun sol panelinde Build'i (Oluştur) genişletin ve Firestore database'i (Firestore veritabanı) seçin.
2. Create database'i (Veritabanı oluştur) tıklayın.
3. Standart sürümü seçin ve İleri'yi tıklayın.
4. Veritabanı Kimliği'ni (default) olarak bırakın.
5. Veritabanınız için bir konum seçin ve Sonraki'yi tıklayın.
   Gerçek bir uygulama için kullanıcılarınıza yakın bir konum seçmeniz gerekir.
6. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
   Bu codelab'in ilerleyen bölümlerinde, verilerinizi güvence altına almak için güvenlik kuralları ekleyeceksiniz. Veritabanınıza güvenlik kuralları eklemeden uygulamayı herkese açık şekilde dağıtmayın veya herkese açık olarak kullanıma sunmayın.
7. Oluştur'u tıklayın.

4. Firebase'i yapılandırma

Firebase'i Flutter ile kullanmak için Flutter projesini FlutterFire kitaplıklarını doğru şekilde kullanacak şekilde yapılandırmak üzere aşağıdaki görevleri tamamlamanız gerekir:

1. Projenize FlutterFire bağımlılıklarını ekleyin.
2. Seçilen platformu Firebase projesine kaydedin.
3. Platforma özel yapılandırma dosyasını indirip koda ekleyin.

Flutter uygulamanızın en üst düzey dizininde, sırasıyla iOS ve Android'e özel yapılandırma dosyalarını içeren android, ios, macos ve web alt dizinleri bulunur.

Bağımlılıkları yapılandırma

Bu uygulamada kullandığınız iki Firebase ürünü (Authentication ve Firestore) için FlutterFire kitaplıklarını eklemeniz gerekir.

• Komut satırından, uygulamanızın kökünden (.../firebase-get-to-know-flutter/step_02) aşağıdaki bağımlılıkları ekleyin:

$ flutter pub add firebase_core firebase_auth cloud_firestore provider firebase_ui_auth

Firebase'i Flutter uygulamanızda kullanmak için birkaç özel paketi birleştirmeniz gerekir:

• firebase_core paketi: Bu, temel başlangıç noktasıdır. Diğer tüm Flutter için Firebase araçları bu pakete bağlı olduğundan bu paketi kullanmanız gerekir.
• firebase_auth package: Bu paket, kullanıcı hesaplarını işlemek için kullanılır. Kaydolma, giriş ve çıkış gibi özellikler eklemenize olanak tanır.
• cloud_firestore paketi: Uygulamanızı Firestore veritabanına bağlamak için bu paketi kullanın. Böylece uygulamanızın verilerini kaydedebilir ve bunlara erişebilirsiniz.
• firebase_ui_auth package: Bu paket, kimlik doğrulama kurulumunu çok daha hızlı hale getirir. Her şeyi sıfırdan oluşturmanıza gerek kalmaması için kullanıma hazır widget'lar (ör. önceden oluşturulmuş giriş ekranları) sunar.
• provider paketi: Durum yönetimi için popüler bir seçenektir. Uygulamanızın bilgileri (ör. kimin oturum açtığı) takip etmesine ve bu verileri ihtiyaç duyulan tüm farklı ekranlarda kullanılabilir hale getirmesine yardımcı olur.

Gerekli paketleri eklediniz ancak iOS, Android, macOS ve Web runner projelerini de Firebase'i uygun şekilde kullanacak şekilde yapılandırmanız gerekir. Ayrıca, işletme mantığının görüntüleme mantığından ayrılmasını sağlayan provider paketini de kullanırsınız.

FlutterFire KSA'yı yükleme

FlutterFire CLI, temel Firebase CLI'ye bağlıdır.

1. Henüz yapmadıysanız makinenize Firebase CLI'yi yükleyin.
2. FlutterFire CLI'yı yükleyin:

$ dart pub global activate flutterfire_cli

Yüklendikten sonra flutterfire komutu dünya genelinde kullanılabilir.

Uygulamalarınızı yapılandırma

CLI, belirli bir platform için tüm yapılandırmayı oluşturmak üzere Firebase projenizden ve seçilen proje uygulamalarından bilgi ayıklar.

Uygulamanızın kök dizininde (flutter-codelabs/firebase-get-to-know-flutter/step_02) configure komutunu çalıştırın:

$ flutterfire configure

Yapılandırma komutu aşağıdaki işlemleri yapar:

1. .firebaserc dosyasına veya Firebase konsoluna göre bir Firebase projesi seçin.
2. Android, iOS, macOS ve web gibi yapılandırma platformlarını belirleyin.
3. Yapılandırmanın çıkarılacağı Firebase uygulamalarını belirleyin. CLI, varsayılan olarak Firebase uygulamalarını mevcut proje yapılandırmanıza göre otomatik olarak eşleştirmeye çalışır.
4. Projenizde firebase_options.dart dosyası oluşturun.

macOS'i yapılandırma

macOS'teki Flutter, tamamen korumalı alan uygulamaları oluşturur. Bu uygulama, Firebase sunucularıyla iletişim kurmak için ağ ile entegre olduğundan uygulamanızı ağ istemcisi ayrıcalıklarıyla yapılandırmanız gerekir.

macos/Runner/DebugProfile.entitlements

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.app-sandbox</key>
	<true/>
	<key>com.apple.security.cs.allow-jit</key>
	<true/>
	<key>com.apple.security.network.server</key>
	<true/>
  <!-- Add the following two lines -->
	<key>com.apple.security.network.client</key>
	<true/>
</dict>
</plist>

macos/Runner/Release.entitlements

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.app-sandbox</key>
	<true/>
  <!-- Add the following two lines -->
	<key>com.apple.security.network.client</key>
	<true/>
</dict>
</plist>

Daha fazla bilgi için Flutter'da masaüstü desteği başlıklı makaleyi inceleyin.

5. LCV işlevi ekleme

Firebase'i uygulamaya eklediğinize göre artık kullanıcıları Authentication ile kaydeden bir LCV düğmesi oluşturabilirsiniz. Android native, iOS native ve Web için önceden oluşturulmuş FirebaseUI Auth paketler vardır ancak bu özelliği Flutter için oluşturmanız gerekir.

Daha önce aldığınız proje, kimlik doğrulama akışının büyük bir bölümü için kullanıcı arayüzünü uygulayan bir dizi widget içeriyordu. Kimlik doğrulama özelliğini uygulamaya entegre etmek için işletme mantığını uygularsınız.

Provider paketiyle işletme mantığı ekleme

Uygulamanın Flutter widget'ları ağacında merkezi bir uygulama durumu nesnesi kullanılabilir hale getirmek için provider paketini kullanın:

1. Aşağıdaki içeriğe sahip app_state.dart adlı yeni bir dosya oluşturun:

lib/app_state.dart

import 'package:firebase_auth/firebase_auth.dart'
    hide EmailAuthProvider, PhoneAuthProvider;
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'firebase_options.dart';

class ApplicationState extends ChangeNotifier {
  ApplicationState() {
    init();
  }

  bool _loggedIn = false;
  bool get loggedIn => _loggedIn;

  Future<void> init() async {
    await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform);

    FirebaseUIAuth.configureProviders([
      EmailAuthProvider(),
    ]);

    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loggedIn = true;
      } else {
        _loggedIn = false;
      }
      notifyListeners();
    });
  }
}

import ifadeleri Firebase Core ve Auth'u tanıtır, uygulama durumu nesnesini widget ağacının tamamında kullanılabilir hale getiren provider paketini çeker ve firebase_ui_auth paketindeki kimlik doğrulama widget'larını içerir.

Bu ApplicationState uygulama durumu sınıfının bu adımda temel olarak bir sorumluluğu vardır: Widget ağacını kimliği doğrulanmış bir durumda güncelleme yapıldığı konusunda uyarmak.

Yalnızca bir sağlayıcıyı kullanarak kullanıcının oturum açma durumunu uygulamaya iletirsiniz. Kullanıcının oturum açmasına izin vermek için firebase_ui_auth paketi tarafından sağlanan kullanıcı arayüzlerini kullanırsınız. Bu, uygulamalarınızdaki oturum açma ekranlarını hızlı bir şekilde başlatmanın harika bir yoludur.

Kimlik doğrulama akışını entegre etme

1. lib/main.dart dosyasının üst kısmındaki içe aktarmaları değiştirin:

lib/main.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart'; // new
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';               // new
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';                 // new

import 'app_state.dart';                                 // new
import 'home_page.dart';

2. Uygulama durumunu uygulama başlatma ile bağlayın ve ardından kimlik doğrulama akışını HomePage'ya ekleyin:

lib/main.dart

void main() {
  // Modify from here...
  WidgetsFlutterBinding.ensureInitialized();

  runApp(ChangeNotifierProvider(
    create: (context) => ApplicationState(),
    builder: ((context, child) => const App()),
  ));
  // ...to here.
}

main() işlevinde yapılan değişiklik, sağlayıcı paketinin ChangeNotifierProvider widget'ı ile uygulama durumu nesnesinin oluşturulmasından sorumlu olmasını sağlar. Uygulama durumu nesnesi, ChangeNotifier sınıfını genişlettiği için bu belirli provider sınıfını kullanırsınız. Bu, provider paketinin bağımlı widget'ları ne zaman yeniden görüntüleyeceğini bilmesini sağlar.

3. GoRouter yapılandırması oluşturarak uygulamanızı, FirebaseUI tarafından sağlanan farklı ekranlara gezinmeyi destekleyecek şekilde güncelleyin:

lib/main.dart

// Add GoRouter configuration outside the App class
final _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
      routes: [
        GoRoute(
          path: 'sign-in',
          builder: (context, state) {
            return SignInScreen(
              actions: [
                ForgotPasswordAction(((context, email) {
                  final uri = Uri(
                    path: '/sign-in/forgot-password',
                    queryParameters: <String, String?>{
                      'email': email,
                    },
                  );
                  context.push(uri.toString());
                })),
                AuthStateChangeAction(((context, state) {
                  final user = switch (state) {
                    SignedIn state => state.user,
                    UserCreated state => state.credential.user,
                    _ => null
                  };
                  if (user == null) {
                    return;
                  }
                  if (state is UserCreated) {
                    user.updateDisplayName(user.email!.split('@')[0]);
                  }
                  if (!user.emailVerified) {
                    user.sendEmailVerification();
                    const snackBar = SnackBar(
                        content: Text(
                            'Please check your email to verify your email address'));
                    ScaffoldMessenger.of(context).showSnackBar(snackBar);
                  }
                  context.pushReplacement('/');
                })),
              ],
            );
          },
          routes: [
            GoRoute(
              path: 'forgot-password',
              builder: (context,