Flutter HEALTHO UI

Selamlar herkese 🙋‍♂️

Flutter ile geliştirme yaparken akla gelen ilk konu UI konusu.Özellikle bir sayfayı yaparken hangi componentler veya hangi yapıyla kurmamız , state yapısını kurmak ve Google’ın bizim için sağladığı üçüncü parti kütüphanelerin farkında olmak çok önemli.

Yolumuza Healtho application’u ile çıkıyoruz.Ashish Chutake ‘in behance da yaptığı tasarımı temel alarak ekranlarımızı yapmaya başlıyoruz.İlk etapta

• Onboarding(tanıtım ekranları)
• Splash (Geçiş ve Kontrol Ekranı)

Ana ilk ekranlar.

Başlarken

• “Screen util “ bizim canımız olup bizim için sayfalarımızda “responsive height weight , fontsize” için kullandığımız çok popüler bir paket.
• Sayfalarda ki kullandığımız “font-family” “Fonts Google”’daki “Poppins” seti indirip projemize dahil ediyoruz.
• Onboarding ekranları için gereken image’ları içeriye alıyoruz.
• Bir kaç Google ve Facebook icon’larını statik olarak ekliyoruz.

Projemiz deki son paketlerimiz şu şekilde:

Ve başlarken ana dosyamız “main.dart” şu şekilde oluştu.

Splash Screen

Bütün uygulamalar da olmazsa olmaz sayfa olup burada genel olarak application’un config dosyaları , “user data’ları” , token yenileme gibi işlemler burada yapılır.Şimdi gelin UI ekranını çizelim.

Ekranımızı inceleyecek olursak akla direk gelen şu şekilde :

• Bir “Center Widget” a ihtiyacımız var
• Bir “Image Asset Widget”

Bu iki widget kullanarak ekranımızı çizelim.

Önemli noktalar:

• ScreenUtil singleton olarak çalışan bir yapı ve projeniz içerisin de bir anda muhakkak init etmeniz gerekiyor.
• Splash ekranında geçici olarak bir logic bakmadığımızdan timer koyup işlem bittiğinde onboard ekranına yönlendiriyoruz.
• Widget’larımızı parçalı bir şekilde kullanıp okumasını artırıyoruz.
• UI Helper method’ları ile de sayfalarda kullanılacak ortaklaşmış yapılar geliştiriyoruz.
• “pushNamed” property’si main.dart taki route’ing tanımlasına göre çalışıp yönlendirmektedir.

OnBoard Screen

Uygulamalarımız da yine çok önemli bir şekilde kullandığımız tanıtım ekranlarıdır. Oldukça önemli olup kullanıcıyı application’la tanıştığı ilk yerdir ve genelde bir defaya mahsus gözükür.

Peki bu ekranı düşünecek olursak

• Ekranımız da sağ en üstte bir “skip” buton’u bulunmakta bunu “AppBar” ın “Action” property’si ile direk geçişleri sağlayacağız.
• Body ise bir dinamik alan olup içerisinde birden fazla page’ler barındırmakta. Burada “PageView Controller” kullanıp gerekli onboard’ing ekranlarını ekleyeceğiz.
• Resimimizin bir altında “indicator” alanı gözüküyor “current page” sarı olarak işaretlenmekte.
• En allta bir next butonu var bunun için bir “Rounded Button” tasarımı yapıp gerekli actionu aldırmak gerekiyor.

UI çizerken ise üst bar ve page’lerdeki fazlalık alanları için “Safe Area” kullanıyoruz.

İçerideki alan için “Column” widget kullanıp alt alta sıralayacağız.

Sayfa tasarımın da ise ortada ki alanı “Expanded yani tüm sayfayı maximum olarak kapsaması(üst ve alttan kalan alanların dışındaki tüm alan)” flex property’si ilede istersek sayfaki kapsam alanını artırabiliriz.

Önemli noktalar:

• PageController tanımlayarak “slide” ve “button” ile geçişleri sağlıyoruz.
• Bir _currentIndex nesnesi tanımlayarak sayfada onboard ekranı değişikliğinde değeri tutuyoruz.Amaç son index’e geldiğinde login’e yönlendirmek.
• AppBar tanımlayarak üstteki alanı sağlıyoruz.Default’ta (on boarding’ten push olarak geldiğimiz için back arrow gelir fakat beyaz olarak gözükür) gelen “back-arrow” iconunu düzeltmek için “iconTheme” property’si ile sağlıyoruz.
• AppBar daki action item’ları için “Chip” widgeti kullanıyoruz ve burada elevation(yükseklik) property’sini 0 a çekerek(burada elle değer değil UIHelper dan gelen değerler ile okumasını ve yapıyı temiz kurmuş oluyoruz.)
• Expanded widget’i bizim için çok önemli Column&Row Widget’ları ile kullanabileceğimiz bir özellik olup bize sayfada tam kapsama sağlar.(Özellikle dinamik tasarım için hiç sayı vermeden kullanmak için flex’ler ile çözümlenir ve landscape ve portrait modlarında responsive bir tasarım elde edilmiş olur)
• Sayfamız’da bulunan alt page indicator(sayfa geçiş belirteçleri) bir listview olup içerisinde sayfa sayısı kadar item oluşur bu item’ları biz CircleAvatar ile circle halde gösteririz.Ve sayfa değişikliklerin de kullandığımız _currentIndex ile listview’deki bir item uyuşursa o rengi sarı uyaşmaz ise beyaz olarak sağlarız.
• Sayfa geçişlerinde onPageChange ile Duration ve Animation property’lerini vererek istediğimiz geçişi sağlayabiliriz.
• Eğer page değişikliği sona gelmiş ve buton’a basıyor isek veya skip buton’a basmış isek Navigator property’si ile de sayfamızı login’e yönlendiriyoruz.

Rounded button’a ihtiyacımız var bu tasarım bize başka sayfalar da lazım olacağını düşündüğümüz’den bunu atomic design compenet’i olarak tanımlayıp sayfalarımız’da tekrar kullanabilir bir yapı sağlamış oluruz.

PageView bizden içerisinde ki “children” property’si ile sayfalar bekler.

Bu sayfalar ortak olacağı için(sadece iconlar ve textler değişiyor) hemde “atomic design” kalıpları için bir ortak widget oluşturulup hepsi oradan türemiş olur.

Oluşturduğumuz OnboardWidget bizden “title subTitle ve imagePath” ile ortak bir yapı sağlamış olur.

Spacer ise flex=1 demektir ve aslında şöyle bir matematik var burada:
Expanded flex=1 , Expanded flex=1 , Spacer flex=1 yani tüm sayfayı 3 e bölmüş oluruz.

flutter healtho login

Uzun uzun sizlerle birlikte component’leri yazmak veya yeniden kullanılması için gerekilenleri atomic design kalıplarına uygun olarak , gerektiğini anlattık paylaştık.

Kaynak kod için 🚀 https://github.com/VB10/HealthoUI

(Contributor olarak gelebilir backend kodlarını da birlikte bağlayabiliriz.Bekleriz dostlar)

Bu serinin ilk yazısını daha uzatmadan burada bitirelim.Diğerlerin de yorum veya isteklerinizi belirterek bizlere birlikte yürüyebilirsiniz.

Sevgilerimle , kolay gelsin.