Başlarken Güncel Uygulama Geliştirme

Flutter’da Animasyonlu Search Bar

Flutter kurulumu ve Flutter’da Nesne Tanımlama gibi konuları anlatmıştık daha önceden. Şimdi de animasyonlu arama çubuğunun kullanımını anlatacağım. Hadi başlayalım…

 

Adım -1 : Flutter projesinin oluşturuyoruz. Daha önce denememişsen buraya bakabilirsin.

Adım -2 : Flutter eklentisini yüklemek için siteye giderek son sürümünü yükleyeceğiz.

Yukarıda yer alan Kırmızı renkli alanı kopyalayacağız. Turuncu renkli kısımda bize en son güncellenme yapıldığı tarihi veriyor. Bu güncellemeye bakmamız çok önemlidir. Çünkü ben şuan bunu anlatıyor olacağım fakat sen 1 sene sonra görebilirsin bu da güncelleme ile kod yapısında ve versiyonda değişiklikler gösterebilir. Biz animasyonlu arama çubuğu yapmak için anim_search_bar eklentisini kullanacağız.

Pub.dev sitesi flutter ve dart geliştiricelerinin kullandığı önemli web sitelerinden. pub.dev bize flutter projelerinde kullanmamız için bütün eklentilerini içerisinde bulunduran bir platform. Sizlerinde farklı eklentiler denemenizi şiddetle tavsiye ederim çünkü güzel eklentiler var.

Adım – 3 : Flutter pubspec.yaml’a eklenti ekleme

Eklentileri eklerken hizalamalara dikkat etmeliyiz. Bu kısım önemli

Adım 4: anim_search_bar Kullanımı.

Eklentiyi indirmiş olduğumuz pub.dev sitesinde bize kullanım detaylarını example bölümünden vermektedir fakat biraz yetersiz. Bizde oradan örnek kodu alacağız ve biraz değiştirip kendi projemize uygulayacağız. Şimdi example bölümünde kodu kopyalacağız ve projemizin main.dart bölümündeki kod bölümü ile değiştireceğiz.

Sonrasın emülator veya kendi cihazlarımızda çalıştıralım. Çalıştırdıktan sonra aşağıdaki gibi “No Material widget found”  hata alacağız. Hata alıyoruz ama aslında Arama çubuğu çalışmakta ama düzensiz. Hadi hatayı düzeltelim.

Adım – 5: “No Material widget Found” hatasının çözümü.

Bize widget bulamadığını söylüyor. Aslında hatanın widget olduğunu anlayacağız burada. Ve Widget build kısmını değiştireceğiz. Scaffold ekleyerek hatayı çözeceğiz.

main.dart klasörünün içerinde yer alana Widget build kısmını değiştirdik ve sonuç:

Hatayı düzelttiğimize göre uygulamada tasarımsal ve işlevsel değişiklikler yapalım. Uygulamamız arama alanına girilen değere göre uygulamanın arka planını değiştirsin. Buna uygun olarak _AppState  bölümünde ufak değişiklikler yaptım. Yapılan işlemleri de yorum satırlarıyla açıkladım. Sizlerde _AppStat aşağıdaki kod ile değiştirin.

 

Yukarıdaki işlem sonrası uygulamamızın son hali aşağıdan izleyebilirsiniz.

 

 

Uygulama Kaynak Kodu : (bkz)

 

Uygulamada alınan hatalar ve görüşler için yorum bölümünden ulaşabilirsiniz.



Yazar hakkında

Furkan Toptaş

Manisa Celal Bayar Üniversitesinde Yazılım Mühendisliği 4. Sınıf öğrencisiyim. Teknovol şirketinde Front-end üzerine kendimi geliştiriyorum. Bilgi sahibi olduğum konuları sizlerle paylaşıyorum. Geri dönüşleriniz benim için önemlidir. Yorum, düşünce ve görüşlerinizi bekliyorum.

Yorumlar

3 Yorumlar

  • Merhabalar pub dev kendi uygulamamıza birden fazla paket ya da eklenti import edip sonra uygulamaya reklam falan eklersek ve play storeden yayımlarsak telif yermiyiz bbir sorun olurmu ?

    • Merhabalar Mert.

      Öncelikli olarak pub.dev, Flutter gelişitiricileri için oluşturulmuş sitedir. Pub.dev’den kullanacağımız paketler veya eklentiler açık kaynaklı olarak bizlere sunulmaktadır. Bu yüzden bizler ne kadar paket kullanmak istersek o kadar kullanabiliriz. Bu da Play store ve App store’de sorun oluşturmaz.

      Uygulama içi reklamlar için belli maddeler var onlara dikkat edersen Play Store ve App Store’de telif veya uygulamanın yayından kalkması gibi durumlarla karşılaşmazsın. Bunlara örnek verirsek;
      Müstehcen İçerik, Şiddet, Zorbalık, Nefret Dolu Söylemler gibi konulara dikkat etmen gerekmektedir.

Bir yorum yaz