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 _AppState  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.