Flutter ile İlk Uygulamanı Yazmaya Hazır Mısın?(part 2)
Herkese merhabalar,
Write Your First Flutter App, part 1’ in devamını bu codelabimizde tamamlayacağız.
Peki bu codelabde neler öğreneceğiz?
- Bir stateful widgeta nasıl interactivity(etkileşim özelliği) ekleyebiliriz?
- İkinci bir ekrana nasıl geçiş yapabiliriz(Navigation)?
- Bir uygulamanın görünümünü temalar(Themes) ile nasıl değiştirebiliriz?
Uygulamamızda en son startup isimlerini listeledik şimdi ise bu isimlerden beğendiklerimizi koruyup bir icona tıklayarak bu verileri başka bir sayfada nasıl tutacağımıza bakacağız. Uygulamamızın son hali ise aşağıdaki gibi olacaktır.
- Icon Ekleme
RandomWordsState sınıfına _saved adında bir Set ekliyoruz. Bu Set içerisinde kullanıcının beğendiği startup isimlerinin depolanmasını sağlıyoruz. Burada Set’i List’e tercih ettik çünkü Set içerisinde bir elemanın kopyası(duplicate) bulunmaz.
- Bu adımda ise _buildRow fonksiyonun içine alreadySaved bool türünde bir değişken tanımlıyoruz, bu değişkenin amacı gelen ismin daha önce favori listesine eklenip eklenmediğini kontrol etmek.
- Bu kısımda ise son olarak _buildRow fonksiyonunu kullanarak kalp iconunu ekleyeceğiz ve gelecek adımlarda ise bu kalpleri
'Saved Suggestions'sayfasına eleman eklemek için kullanacağız.
2. Iconu Etkinleştirme
Butonumuzu aktifleştireceğiz ve startup ismimiz beğenilmiş ise Icons.favorite iconu çalışsın ismimiz beğenilmemiş iseIcons.favorite_border iconunu çalıştırmasını isteyeceğiz. Bunu yapmak için ise _buildRow fonksiyonunda değişiklikler yapacağız.
- Eğer bir isim favorilere eklenmişse tekrar dokunulduğunda favorilerden çıkarılsın, favorilere ekli değilse eklensin. Bu değişikliği kontrol etmek için ise onTop() ve setState() metotlarını kullanacağız.
3. Yeni Bir Sayfaya Geçiş(Navigate)
Bu adımda, favori isimleri gösteren yeni bir sayfa ekleyeceğiz. Peki yeni sayfaya nasıl geçiş yapabiliriz?
Flutter da, navigtor uygulamanın rotaları içeren bir stack ile yönetir. Navigator stack e yeni bir rota push eder ve ekran o rota ile güncellenir ve stackte pop işlemi gerçekleşirse bir önceki sayfaya geri döneriz.
Şimdi appbara bir icon ekleyeceğiz ve o iconu kullanarak favori isimleri listeleyeceğimiz sayfaya geçiş yapacağız.
- Daha sonra onPressed de çağırılan _pushSaved fonksiyonunu tanımlıyoruz.
Artık appbarımızda aşağıdaki gibi bir icon bulunmakta ama_pushSaved fonksiyonumuz hala boş.
Şimdi ise yeni bir rota oluşturup Navigator’ün yığınına push edeceğiz. Bu işlem ile yeni ekranı göreceğiz. Bu yeni sayfamızın içeriği ise MaterialPageRoute’un (<void>) builder özelliği ile oluşturacağız.
- IDE bunun geçersiz bir kod olarak kabul edecektir bu problemi ise gelecek adımı tamamladığımızda çözmüş olacağız.
- Bu adımda MaterialPageRoute ekleyip builder özelliğini kullanalım. Ve ListTile satırlarını oluşturalım. divideTiles() metodu ile her ListTile arasına yatay bir mesafe ekleyelim.
** Bölünmüş değişken son satırları tutar ve bunları toList() ile listeye dönüştürürüz.
Son olarak da bir Scaffold geri döndürerek son eksiklikleri de tamamlayalım. AppBar’a ise title olarak “Saved Suggestions” yazalım.
Hot reload yaparak uygulamamızı çalıştıralım.
Bir uygulamada tema(theme) oldukça önemlidir. Tema uygulamamızın görünüşünü ve verdiği hissi kontrol eder. Şimdiye kadar temayı kullanmadığımız için hep varsayılanlar temayı kullandık. Peki nasıl özelleştirebiliriz temayı?
ThemeData classı ile bunu yapmak oldukça kolay. Haydi uygulamamızın primary color özelliğini ThemeData classı ile beyaz yapalım.
Bu yazıyı sonuna kadar okuduğunuz için teşekkür ederim. Önerileriniz, sorularınız için yorum bırakabilir veya twitter üzerinden benimle iletişime geçebilirsiniz. Aşagıdaki linkten de kodların bütün haline erişebilirsiniz.
Bu yazının orijinal haline aşağıdaki linkten ulaşabileceğinizi belirtmek isterim.
