Flutter: UI Login Screen Challenge
Merhabalar,
Flutter denince akla gelenlerden ilki genelde “Expressive, beautiful UIs” olur. O güzel tasarımlarınızı Flutter’da uygulamak mümkün hale geliyor. Bunun yanı sıra akıllara “Peki kompleks tasarımları nasıl yaparız?” diye bir soru geliyor. Bu kompleks tasarımların çözümlerini bulmaya çalıştığım bir template uygulama yapmaya karar verdim. Uygulama GitHub hesabımda mevcut.
Kod kod kod diyenleri şöyle alalım :)
Bu yazımda
- UI Login tasarımları nereden bulabilirsiniz?
- UI Login ekranları nasıl kodluyorum?
konu başlıklarından bahsedeceğim.
Tasarımları Nereden Bulabilirsiniz?
vb. sitelerden “Free” olanları indirip Adobe XD uygulamasında açıyorum. “XD .Sketch uzantılı dosyaları destekliyor.”
Örnek bir tasarım bulalım:
Ve kontrol ediyorum tasarım sahibi herhangi bir tasarım dosyası paylaşmış mı? Tasarım dosyası yok ise renk paletleri, font tipi vb. paylaşmış mı?
En önemlisi kullanmamız için izin vermiş mi?
Bu adımları kontrol ettikten sonra kodlama kısmına geçiyorum.
Nasıl Kodluyorum?
Burada her sayfa için yeni bir nesne oluşturmanın en büyük artısı, bir değişiklik yapıldığında tüm nesneleri etkilemesi ve hızlı bir değişiklik sonucu vermesi.
Bu sayfada, uygulama açıldığında ekranların listelenmesi için her ekranı bir listeye ekliyorum. Böylelikle her yeni ekran eklediğimde ana ekranda görünmesini sağlıyor.
Değişkenleri tanımlarken her sayfada ayrı ayrı tanımlama yapıyordum ve bazen istemeden de olsa aynı tanımlamaları yapıyordum. Bu yaptığım “Clean Code” temellerine uymuyordu. Bunu düzeltmek için “UI Helper” fikrini öğrendim. Böyle bir değerli fikri bana öğrettiği için Veli Bacık abime buradan teşekkür etmek istiyorum.
Burada UIHelper sınıfımızın amacı ise her seferinde aynı değişkenleri tekrar tekrar yazmaktan kaçınmak.
Yeni nesnemi oluşturduktan sonra yeni bir sayfada Stateful widget ekliyorum.
Burada kodlamaya başlamadan önce en uygun hangi widget ile yazabileceğimizi düşünüyoruz.
Ben bu tasarımda böyle bir tercih yaptım:
ListView yerine SingleChildScrollView widget’ını tercih etmemin en temel sebebi herhangi bir durumu tekrarlamıyor olmam.
Column tercih etme sebebim ise widget’ları sıralamam için kolaylık sağlaması. Property’leri ile istediğiniz sonucu elde edebilirsiniz.
Ve genellikle Custom olarak kendi widget’larımı oluşturmaya özen gösteriyorum. Böylelikle kodları tekrarlamaktan kaçınıyorum.
Diğer sayfalar içinde aynı yöntemleri izleyerek tasarımlarını çabucak oluşturabiliriz. Her gün yeni bir sayfa eklemeye çalışıyorum. Daily challenge yaparak kendimi geliştirmeye çalışıyorum.
Yazıyı okumak için zaman ayırdığınız için teşekkürler, umarım faydalı olmuştur.
Uygulamayı incelemek isteyenler için tekrardan github repo:
https://github.com/mukireus/flutter_ui_template_login
Bu makalemi yazmamı öneren Beyza Sunay Güler’e teşekkür etmek istiyorum.
Ve ayrıca teşekkür ederim:
Bana bu adreslerden ulaşabilirsiniz:
