Merhaba, bu yazıda flutter için firebase kullanımına göz atacağız. Kullanıcı kayıt-giriş sistemi, veri çekme, veri kaydetme gibi işlemleri örneklerle göreceğiz. Daha fazla kaynak için tıklayın.
Öncelikle firebase’i projenize entegre etmek için birkaç adımı uygulamanız gerekiyor fakat ben bu adımları atlayacağım. Size buradan ulaşabileceğiniz bir kaynak bırakıyorum. Çok fix şeyler olduğu için atlıyorum.
Ep1: Arayüz ve kullanıcıdan veri alma
Flutter çoğu kişiye göre aşırı karmaşık geliyor. Bu yüzden sizi sıkmadan kısa kısa kod parçalarıyla örnek vereceğim. Projeye github’dan ulaşabilirsiniz.
TextField(
controller: userNameInput,
decoration: const InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
),
hoverColor: Colors.blue,
border: OutlineInputBorder(),
labelText: 'Username',
labelStyle: TextStyle(color: Colors.blue),
),
),3 adet TextField’im var ve bunların her biri email, password ve username inputları olarak işlev görüyor. Veri ihtiyacınıza göre bu TextField’leri artırabilirsiniz. Burada dikkat etmemiz gereken en önemli kısım TextField controller’i 🙂 Her TextField farklı bir controller almalı ki bu girilen verileri işimiz bitince doğru şekilde kullanabilelim.
final emailInput = TextEditingController();
Controller’i bu şekilde tanımlayıp ilgili TextField’in içinde controller’e veriyoruz. Ana Widget’in içinde tanımlayabilirsiniz.
Son olarak bir butonumuz mevcut. Bu butona kayıt işlevi atayacağız. Öncelikle butonumuzun kodlarına bakalım sonra firebase’e kullanıcıyı kaydetmeye geçelim.
ElevatedButton(
onPressed: () {
_authService.createPerson(
emailInput.text, passwordInput.text, userNameInput.text);
},
child: const Text(
'Kaydet',
style:
TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.white),
),
),Kafanız karışmasın, şuan için önem vermemiz gereken kısım butonun onPressed özelliği. Diğer kısımlar dekorasyona giriyor.
Evet, şu ana kadar elimizde 3 adet TextField ve 1 adet buton bulunuyor. Bunlarla ne yapacağız ? 3 adet TextField’den kayıt için gerekli verileri alıp buton ile bu bilgilerle Firebase’de kullanıcı oluşturan fonksiyona atayacağız. Hadi bir sonraki kısıma geçelim.
EP2: Firebase ile kullanıcıyı kayıt etme
auth.dart adlı scriptimize firebase auth, firebase firestore ve flutter toast paketlerini entegre ediyoruz.
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:firebase_auth/firebase_auth.dart';Adlarından anlaşılacağı üzere firebase auth’u kayıt sistemi, cloud firestore’i veritabanı için, flutter toast’ı ise hatalı veya yanlış veri girilince alt kısımdan bilgi kutucuğu çıkartmak için kullanacağız. Hadi scriptimizi dolduralım.
Öncelikle bize kolaylık sağlasın her seferinde uzunca bir kod yazmayalım diye Firebase işlemlerini nesne olarak oluşturuyoruz.
FirebaseAuth _auth = FirebaseAuth.instance;
FirebaseFirestore _firestore = FirebaseFirestore.instance;Kullanıcıya herhangi bir bilgi iletmek isteğimiz zaman telefonun alt kısmından bir baloncuk çıkartıp onun içine vermek istediğimiz mesajı yazıyoruz. Biraz karışık gelebilir dediğim gibi dekorasyon kısımlarına takmayın 🙂
void _showErrorMessage(String text) {
Fluttertoast.showToast(
msg: text,
timeInSecForIosWeb: 2,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.grey[600],
textColor: Colors.red,
fontSize: 14);
}Gelelim asıl noktaya. Kullanıcıyı kayıt ettiren fonksiyonu yazalım. Neden future veya async kullandığımızı başka bir yazıda açıklayacağım. Fonksiyonumuz 3 adet veri alıyor. Önce bu veriler boş gelmiş mi diye bakıyoruz gelmediyse devam ediyoruz.
await _auth.createUserWithEmailAndPassword(email: email, password: password)Kullanıcıyı veri tabanına bu şekilde kaydediyoruz. Daha önceden hazırlanmış fonksiyonlar kullanıp sadece parametre olarak email ve password’u vermemiz yetiyor. Hatırlayın üst kısımlarda FirebaseAuth’u _auth nesnesi olarak tanımlamıştık. İsterseniz FirebaseAuth.instance.createUser… diyerekte kullanabilirsiniz.
await _firestore.collection("persons").doc(user.user!.uid).set({
"Email": email,
"UserName": userName,
});Normalde bu kısım yazımızın amacına pek uymuyor ama hazır yazmışken bunuda anlatayım dedim. Her şey çok güzel, kullanıcımızdan verileri alıp kullanıcımızı oluşturduk. Peki kullanıcı ile ilgili ek verileri tutmak istersem ne olacak? Auth sistemi sadece iki veri alır. Biz örneğin kullanıcının yaşını, yaşadığı şehri vs kaydetmek istiyoruz. İşte bu durumda FirebaseFirestore kullanmalıyız.
Yukarıda verilen kod ile “persons” adlı koleksiyonda otomatik oluşturulan kullanıcı id’si adında bir belge oluşturup email ve username verilerini kaydediyoruz. Burada bir önemli nokta daha mevcut. Görselde belirtilen konuma gidip izin vermemiz gerekiyor. İşaretli kod sizde “false” olacaktır bunu “true” yapıyoruz aksi halde iznimiz olmadığı için veriyi kaydedemeyiz.
Evetttt, kullanıcı oluşturma ve gerekli kullanıcı verilerini veritabanına yazmayı öğrendik. Şimdi ise size createPerson fonksiyonunun tam halini vereyim.
Future<User?> createPerson(
String email, String password, String userName) async {
if (email != "" && password != "" && userName != "") {
var user = await _auth
.createUserWithEmailAndPassword(email: email, password: password)
.catchError((dynamic error) {
_showErrorMessage(error.message);
});
await _firestore.collection("users").doc(user.user!.uid).set({
"Email": email,
"UserName": userName,
}).catchError((dynamic onError) {
_showErrorMessage(onError.message);
});
} else {
_showErrorMessage("Bilgileri eksiksiz doldurun!");
}
}Veri tabanındaki sonuç:
EP3: Kullanıcı girişi
Kullanıcı girişini email ve password ile yapacağız. Bu yüzden 2 adet TextField ve 1 butona ihtiyacımız var. Kullanıcı kayıttan farklı bir scriptte giriş sistemini yapalım. signIn.dart adında bir script açalım ve kodumuzu yazmaya başlayalım. Önceki TextFieldlerin aynısını kullanabiliriz. Kullanıcı girişindeki önemli olan nokta buton. TextFieldleri kayıt sisteminden kopyaladık gelin butona bakalım.
ElevatedButton(
onPressed: () {
_authService.signIn(emailInput.text, passwordInput.text).then((value){
Navigator.push(context,MaterialPageRoute(
builder: (context) => GıtmekIstedıgımSayfa(),
)));
});
},
child: const Text(
'Giriş',
style:
TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.white),
),
),OnPressed özelliğinde auth.dart scriptimizdeki signIn fonksiyonuna ulaşıyoruz. Bu bize bir bool değeri return ediyor. Bu bool değerine göre başarılı bir şekilde giriş yaptığımızı anlayıp kullanıcıyı Navigator.push ile başka sayfaya yönlendiriyoruz. Gelin signIn fonksiyonuna göz atalım.
Future<User?> signIn(String email, String password) async {
await _auth
.signInWithEmailAndPassword(email: email, password: password)
.catchError((dynamic error) {
_showErrorMessage(error.message);
});
}Yine 2 adet parametre alıp bunlarla işlem yapıyoruz. _auth.signInWithEmail… diyerek parametrelerimizi veriyoruz. Eğer bu işlem sırasında hata alırsak catchError ile yakalayıp kendi yazdığımız kullanıcıya toast çıkaran fonksiyona bu error’u iletiyoruz. Örneğin yanlış şifre girersek bir baloncuk çıkıp içinde “Wrong password” yazacak. Hataları yakalamanıza gerek de olmayabilir. Ben kullanıcı canlısı olsun diye böyle bir şey yaptım. Evet 🙂 giriş sistemi daha kolay geldi değil mi ?
Sorunuz olur veya hata alırsanız lütfen benimle iletişime geçmeyi veya yorum atmayı unutmayın. İletişim sayfasına gitmek için tıklayın.
Projenin Github linki için tıklayın.
Sorunlarınızı yorum olarak yazabilirsiniz.