[ad_1]
Selamlaar 👋 Şimdiye kadar Native Android, HarmonyOS ve Huawei Mobil Servisleri konularında çeşitli makaleler yazdım. Şimdi ise Flutter konusunda bir makale yazmak istiyorum. Keyifli okumalar 🙂
Flutter denilince çoğu kişinin aklına gelen ilk şey UI tarafında esnek bir şekilde geliştirme yapılabilmesi oluyor. Durum böyle olunca kişiselleştirilmiş ve göze hoş gelen tasarımlar çıkarmaya çalışanların sayısı oldukça fazla. Bende bir yapı seçip, kendime özel bir Widget geliştirmesi yapmak istedim. Ve “Badge” yani “İşaret” anlamına gelen yapıyı seçtim.
Badge Nedir? Herhangi bir ikonun etrafındaki herhangi bir konuma yerleştirilmiş işaret diyebiliriz. Bu işaret bizi o ikonun amacı hakkında bilgilendirmek / uyarmak için eklenir.
Kendi özel widget’ larınızı oluşturmak için yapmanız gereken her şeyi adım adım anlatmaya çalışacağım. İşte atacağımız adımlar:
1- Widget’ınızı tasarlayın:
Ben “Badge” yapısını seçtiğim için bu yapıyı kendime göre nasıl tasarlarım, neler görmek istiyorum, bunları belirledim. Bu kısmı bir kağıt üzerinde veya bilgisayarda tasarım programları kullanarak yapabilirsiniz.
2- Tasarımınızı Ayrıştırın:
Tasarımınızın içerisindeki yapıları ayrıştırmanız gerekmektedir. Bu ne demek oluyor, örneğin “Badge” yapısında bir ikon kullanmam gerekiyor, onunla birlikte bir yuvarlak işaret ve işaretin içerisinde bir yazı olması gerekiyor. Bunlar için hangi widget’ ları kullanmam gerektiğini belirleyip geliştirmeye devam ediyorum: Stack, IconButton, Visibility, Positioned, Container, Textual content.
3- Temel şekilde Widget’ınızı Oluşturun:
Proje içerisinde “lib” klasörüne sağ tıkladıktan sonra “New” > “File” diyerek widget dosyasınızı isim vererek oluşturun. Sonrasında Widget’ınızı oluştaracak gerekli kodları yazmanız gerekmektedir. Ben “Badge” Widget’ı için aşağıdaki kodları yazdım.
Constructor kısmında bazı parametreleri kullanıcıdan zorunlu olarak isterken diğerlerini opsiyonel olarak ekledim. Sonrasında “construct” metodunun içerisinde tasarımsal kısmı geliştirerek ortaya bir widget çıkarmış oldum.
4- Görünümü Özelleştirme:
Aslında bu bölümden yukarıda bahsetmiş oldum. Constructor kısmına opsiyonel olarak eklediğim her parametreyi geliştirdiğim Widget’ ı özelleştirme / kişiselleştirme amacıyla ekledim. Bu sayede hem kişisel kullanımda hem de diğer geliştiricilerin bu Widget’ ı kullanım ihtimalinde çok fazla çeşitlilik ortaya çıkabilir.
5- Kullanıcı Etkileşiminin Belirlenmesi:
Geliştirdiğiniz Widget’ ın nasıl kullanılacağı kısmında kullanıcı ile etkileşimini de düşünmeniz gerekmektedir.
Badge Widget için “IconButton” Widget’ına tıklanma etkileşimini,
IconButton(iconSize: iconSize, onPressed: onSelectPressed, icon: badgeIcon)
ve kullanıcının verdiği değere göre Widget’ın üzerindeki yazının değişmesi etkileşimini “Textual content” Widget kullanarak geliştirmek istedim.
Textual content(counts.toString())
6- Parametrelerin Tanımlanması ve Implement Edilmesi:
Widget’ı geliştirirken kullanıcıdan istediğiniz zorunlu ve opsiyonel parametrelerin Widget ile birlikte uygulama içerisindeki kullanımını aşağıdaki kod bloğundan inceleyebilirsiniz. Ben aynı Widget’a farklı parametreler vererek 3 farklı tasarım oluşturmak istedim.
7- Widget’ın Check Edilmesi:
Geliştirdiğiniz Widget’ı uygulamada da görebilmek için gerekli kodları yazdıktan sonra tabi ki de take a look at etmek gerekmektedir. Aslında işin daha zevkli tarafı bu kısım olabilir 🙂
Flutter’da uygulamanızı geliştirirken kendinize özel Widget’ lar geliştirebilir, farklı yerlerde farklı tasarımlarla kullanabilirsiniz. Ama dikkatli olmakta fayda var, her durum için özel bir widget geliştirmeye çalışırsanız yarardan çok zarar olabilir.
Umarım yararlı bir makale olmuştur. Görüşmek üzere 🤗
[ad_2]
Source_link