Flutter Healtho UI - 5

Veli Bacık
Sep 8 · 5 min read

Selamlar yeniden birlikteyiz.
Serimizin ilk serisine buradan erişebilirsiniz.

Bugün bizleri neler bekliyor?

  • “Health Tips”, sağlık ipuçları, içerisinde sağlık kartları barındırıp bunların detayını okuyabildiğimiz bir sayfa.
  • “Exercises”, kullanıcının egzersiz yapabileceği opsiyonları gösteren sayfadır.
  • “Physiques”, kullanıcının kendi kişisel bilgilerini girdiği ve tanımladığı sayfadır.
  • “Contribute for any project”, bir başkasının projesine nasıl destek olunur, nasıl kod yazılır.
healtho exercies tips
healtho exercies tips

Health Tips

Analiz

  • Sayfamız içerisinde dikey sıralanan sayfalar bulunduruyor.
  • Sayfamız bir liste barındırıyor ve bunun elemanları birer model olup; modelin içindeki değerlere göre resim veya yazılar değişiyor.
  • Bu listenin içerisinde özel bir kart dizaynı barındırıyor.
    - Bu kart dizaynı için bir Stack kullanmamız gerekiyor ki arkasında bir resim önünde bir text alanı elde edebilelim.
  • Önemli nokta, dokunulduğunda detaya gitmesi ve giderken ilgili kart içindeki verileri taşımasıdır.

Kod

Neden böyle yazdık ?

  • İlgili “gist” dosyasını açtığınız zaman iki ayrı ekran kodları göreceksiniz.
  • Birinci ekranımız dikey olarak sıraladığımız sayfaların tasarımıdır.
    - Dikey olarak sıralamak için “Default Tabbar” kullandım.
    -Burada tabbar’ı üstte göstermek için “AppBar” “flexibleSpace” property’sine atadım çünkü bu alan bize “ custom bar “ yapmayı sunuyor. Bunun yerine direk “Appbar — bottom” alanına da verebilirdik ama bir kaç customize için “flexiblespace” kullandık.
  • “tabs” içersine verdiğimiz eleman sayısı kadar bir sayfa olması gerekiyor. Şimdilik iki sayfa yaptığımız için üçüncü sayfayı boş atadık.(geçici bir container() vererek.)
  • Tabbar’ı özelleştirmek için belirli alanlar var. Bunları kullanarak “indicator color, underline color” gibi alanları düzeltebiliyoruz.
  • İkinci ekranımıza gelelim.
  • Burada biz geçici bir liste tanımladık. Sizler servis isteklerinizden gelen cevapları bu listede verebilirsiniz.
  • Sayfada listelemek için “Listview.Builder” kullandık ve bizden ilk sayfa elemanları gelirken “item count & builder” alanlarını bekleniyor.
    (item count = eleman sayısı builder = ilgili elemanların tasarımları)
  • Sayfada tüm elemanların kendi boyutlarını almasını sağlamakta. Eğer sayfanızın elemanları “height” alanı var ise sorun yok ama kendi boyutlarını almasını bekliyorsanız “shrinkwrap=true” demelisiniz.
  • Elemanlarımızı “Inkwell Card” ile sarmalayarak dokunma (OnTap) aksiyonunu yakalıyoruz.
  • “Card” widget için bize köşelerden kıvrım gerekiyor bunu shape ile ekleyerek çözümlüyoruz.
  • Bir önemli olanda “Stack”. Stack ile “card”’ımızın arkasını image ile kaplıyoruz.
    - Ön tarafına ise “card”’ımızın detay “card”’ını ekledim.
    -Stack içerisinde Positioned property’si önemli bu alan ile biz stack arkasına full image verebileceğimiz gibi özel konumlandırmalar yapılmaktadır.( top bottom right left )
  • Son olarak ListTile bakacak olursak, çok sıklıkla kullandığım temel düzeyde left-body-right olarak düşündüğümüz bir yapı.

Detail

Sadece gelen elemanları “navigation” içinden alıp sayfada göstermek üzerine çalışan bir yapıdır.

Yine önemli noktalardan birisi “RichText” ile özel bir “Text” tasarımı yapabiliyoruz.

KOD

Neden böyle yazdık ?

  • Detay sayfamız sadece gösterme üzerine çalışıyor.
  • İlk sayfa yüklendiğinde navigation içinden ilgili alanları çekip detay sayfamız da gösteriyoruz.
  • Detay sayfasında “Rich Text” ile kullanarak listeledik.

Exercise

Analiz (Kod + Düşünce)

  • Sayfamızın en önemli noktası ikili bir gösterim mevcut. Ve iki opsiyonumuz var:
    -Grid kullanarak yapmak ki biz böyle yaptık.
    -Wrap kullanabilirdik burada sıkıştırarak sayfamızda 2–3(card genişliği yettiği kadar) yapı görebilirdik.
  • Sayfamızda “UnmodifiableListView” kavramı ile performansı yüksek bir liste oluşturuyoruz. Normalden farkı ise sadece readonly olup okuma işlemi yapmak için kullanılır.
  • “Card”’ımızın üstünde bir alan bulunmakta bunu “stack” ile çözüyoruz.
  • “Card”’ımızı en küçük parçasına kadar ayırıp tasarımızı tamamlıyoruz.

KOD

Physiques

Analiz

  • Bu sayfamız en kritik alanlardan birisi bizlerin 4 farklı diyaloğa ihtiyacı var.
  • Bu dialoglardan bazılarını biz kendimiz yaptık, bazısı içinde paket kullandık.
  • Sayfa da önemli olan birde gerekli diyaloglar dan gelen verilere göre “card”’in içinin dolması gerekmektedir.

Kod

Neden böyle yazdık ?

  • Sayfamızda dinamik olarak değerler olacağını düşündüğümüzden bir Physique modeli oluşturduk. Bu değer sayfadaki seçimlere göre dolup ekrana gelmektedir.
  • Sayfa tasarımında ise “Column” kullanarak sayfamızı tasarladık. Buradaki “flex” değerlerinin önemi şu:
    - Flex 2 demek %20 kaplamak değil. Diyelim ki sayfanızda birden fazla komponent var bunlar şu şekilde, flex:1 , flex:2, flex:3 . Bu şu anlama geliyor flex:2 olan 1+2+3 yani altılık birimin ikisi oda 2/6'dan 1/3 yani sayfanın %33'üne denk geliyor.
  • Gelelim diyaloglara. Burada:
    - Kendi yazdığımız “showAge,showWeight,showLevel” bulunmaktadır. “showHeight” üçüncü parti bir çözüm olarak aldık ama orayada kod yazarak destek olduk anlatacağım :).
  • Kendi yazdığımız diyaloglarda önemli olan “showDialog” diyip içersine “Dialog” komponenti vermek. Gerisi bizim çizimimiz.

“Switch” showlevel de kullandığımız komponent diğerlerinden bir tık farklı. Çünkü içerisindeki yapı gereği bir “event” sonucu misal dokunma başka bir eleman seçiliyor. Bu da aslında kendi içerisinde bir state tutması gerektiği algısını doğuruyor. O koduda şöyle incelersek kafamızda ki kurgu kendini belirli ediyor.(Physique gist’in ikinci kısmında yer alıyor)

  • Özellikle bizim yazdıklarımız “listview.builder” ile türemiş nesneler olup görüntüleme yapıyorlar ardından dokunma olayına göre (ontap) sayfada işlemini yapıp kapatıyor.
  • Üçüncü parti olarak kullandığımız ekran ise şu şekilde:
  • Burada bizim için önemli olan ikili bir number yapısının olması ve bu sayede istediğimiz ekranı alabilmekteyiz.

Contribute

Yine önemli ve bence herkesin yapabileceği bir konuyu kısaca özetliyorum.

Nedir diyecek olursanız sorun ve çözümle gidelim.

  • “Number picker” ihtiyacım oldu ardından buldum fakat bulduğum component şu şekildeydi.
  • Bu komponent içerisinde sağ ve sol sayıların açıklamalarını girebileceğim bir alan sunmuyordu bana.
  • İlgili repo’yu github’dan bulup kendime “clone” ettim.
  • Ardından kafamdaki seneryoyu bu komponente yazıp kendilerine pull request açtım zamanla onlarda gerekli görüp yorumlarla birlikte içeri alacaklardır.
  • Ve bu sayede hem kendim için ihtiyacımı karşıladım hemde community’e destek vererek gelişime katıkıda bulunmaya çalıştım sizde yapabilirsiniz.

Veeee biterrr 💘

Healtho UI serisinin son bir iki parçası kaldı. Yenilerinde görüşmek üzere 🚀

Kaynak kod : https://github.com/VB10/HealthoUI

Flutter Türkiye

Flutter SDK için Türkçe ve İngilizce kaynaklarin yayinlayan topluluk

Veli Bacık

Written by

We always change the world so just want it.Mobile programming ❤

Flutter Türkiye

Flutter SDK için Türkçe ve İngilizce kaynaklarin yayinlayan topluluk

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade