Perşembe 2 Şubat 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Başlarken
  3. Flutter’da Animasyonlu Search Bar
 Flutter’da Animasyonlu Search Bar
Başlarken Güncel Uygulama Geliştirme

Flutter’da Animasyonlu Search Bar

Yazar : Furkan Toptaş 13 Nisan 2021 1 Comment

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.

Etiketler: animsearchbar Arama çubuğu Flutter Flutter'da Arama çubuğu pubdev searchbar
Önceki Yazı
Sonraki Yazı

Furkan Toptaş (Website)

administrator

Manisa Celal Bayar Üniversitesinde Yazılım Mühendisliğinden mezunum. Şuanda Isparta Uygulamalı Bilimler Üniversitesinde Bilgisayar Mühendisliği bölümünde yüksek lisans yapmaktayım. Aynı zamanda Teknovol şirketinde Yazılım geliştirici olarak çalışmaktayım. Webmaster Kitchen platformunun geliştirilmesinde ve Yönetim Kurulunda yer almaktayım. Bilgi sahibi olduğum konuları sizlerle paylaşıyorum. Geri dönüşleriniz benim için önemlidir. Yorum, düşünce ve görüşlerinizi bekliyorum.

1 Yorum

  • Mert says:
    30 Nisan 2021 at 02:16

    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 ?

    Reply

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.