Flutter HEALTHO UI -3

Veli Bacık
Aug 16 · 4 min read

Selamlar 🙋‍♂️
Serimize devam ediyoruz. Eski yazılarımıza buradan ulaşabilirsiniz.

Bugün birlikte yapacağımız sayfalar şu şekilde :

  • Settings Page
  • Tab Page
  • Reminder Page
  • Notification Page
  • Profile Page

Haydi Başlayalım 🚀

Tab Page

Analiz

  • Bir çok uygulama da uygulamanın ana akışı “tab (sekme)” burada olur.
  • Tab’lerde kullanacağımız sayfaları düşünüp ona göre vermemiz gerekir.

Tabbar daki sayfalarınızın sayısının bir sınırı var. Özellikle Android’de maksimum 5 sayfa tanımlayabilirsiniz. Zaten daha fazlası çok küçük geleceğinden bunu yapmayı düşünmemeliyiz.

  • Tabbar’da bulunan her “icon” bir sayfayı temsil eder, fakat bizim bar’ımızda bir profil icon’umuz var bunun için ufak bir “code hacking” yapacağız.

Code

Detay

  • Verdiğimiz “length” sayısı kadar “TabView & Tab” tanımlamalıyız.
  • Tab: ise bar’daki icon’larımızı temsil eder.
  • Tabbar daki item’lara dokunduğumuzda “setstate” ile seçtiğimiz sayfanın index’ini _currentPageIndex’e eşitliyoruz.
  • Sayfalar değiştikçe “Appbar” daki title değerinin güncellenmesi içinde _currentPageIndex’e göre kontrol edip sayfanın başlık değerini alıyoruz.
  • Tabbar ilk halinde swipe özelliği açık gelir bunu kapatmak için NeverScrollableScrollPhysics özelliğinden faydalanıyoruz.
  • Önemli nokta son sayfa :
    Tasarım son sayfa yok ama bar’da normal sayfadan fazla sadece görüntülenme üzerine (profil resmi) bir item var.
    Tabbar’a yeni bir item eklemek demek bir yeni sayfa ekleme zorunluluğu getiriyor.
    Tabbar’a bir “FlatButton vb.” bir button atarak oradaki dokunma ektileşimini kaldırmış ve bu sayede hiçbir zaman için son sayfayı çağırmamış oluyoruz.

Notification Page

Analiz

  • Sadece okuma işlemi yapılan bir sayfa olarak gözüküyor.
  • Bir “Card” tasarımı ile bu sayfa tamamlanmış olacak.

Code

Detay

  • Sayfa daki card’larımız tek bir yerden yönetilmesi adına ortak bir “widget” yazdık.
  • Card item’ların text style’ları yine ortak bir yerden kontrol edilmesi için ortak bir style sayfasından çağrıyoruz.

Reminder Page

Analiz

  • Sayfamız da ortak bir card’a ihtiyacımız var.
  • Card item’ların içerisine bakıcak olur isek;
    Bir row ile iki parçaya ayrılmış parça var.
    Her row’un altında bir column ile de parçalanmış bir view var.
  • Özellikle “repeat — mon tue “ yazan alanda RichText kullanarak text’imizi diğer style’ları verebilmek için parçalıyoruz.
  • Floating Action Button (FAB) ile de sayfamızın sağ köşesinde bir button ekliyoruz.
  • Özellikle yine bir önemli konu şu , sağ köşede “fab” button’u ekleyince , “scroll” hareketi yapsak dahi card’ların üzerine çıkabiliyor.

Bunun için güzel bir çözüm Listview.builder kullanırken son item’a geldiğinde alltan bir fazla boşluk vermek veya listview tasarlıyıp en alta bir boşluk atamak.(Listview kullanırken shrinkwrap özelliğini true’ya çekmeyi unutmayın.)

Code

Detay

  • Sayfa daki card’ları tasarlarken height değerinizi dinamik tutmaya çalışın, birden fazla ekranda direk 200 yazar iseniz çatlamalar yaşayabilirsiniz.(Eğer hiç height vermeden nasıl derseniz bir kaç padding ve shrinkwrap true diyerek işinizi halledebilirsiniz.)
  • FAB button’a border özelliğini verebilmek için CircleBorder kullandığımızı unutmayalım.

Settings Page

Analiz

  • Sayfada ortak bir card’a ihtiyacımız var.
  • İlk card diğerlerinden farklı bir özel tasarım gerektiriyor.
  • “Language Options” bizim için bir picker gerektirmekte.
  • Notifications alanına dokunduğumuzda “on/off” olarak değişmeli.

Code

Detay

  • Sayfada _selectedLangIndex ve _tempSelectedIndex dediğimiz alanlar açılan picker’daki seçimleri saklamak için yaptığımız bir alandır.
  • Bize bir picker gerekmekte bunun için “CupertinoPicker” tercih ediyoruz ve “en / tr” diye değerleri set ederek kullanıcının seçim yapması gereken alanı açıyoruz.
  • Yine Notifications card’ına dokunuluğunda değişmesi için bir metot tanımlıyoruz içeride.
  • SettingsCardWidget ile ortak bir widget yazıyoruz ve sayfalarımızda tekrar tekrar aynı kodları yazmaktan kurtuluyoruz.

Profile Page

Analiz

  • Bir önceki sayfamız ile benzerlik gösteriyor.
  • İlk alan için bir tasarım gerekiyor.Bunun için “row” ve” column” widget’ları kullanabiliriz.
  • Sadece “read only” alanlar olduğu için hepsini bir kaç ortak metot ile ekleyebiliriz.

Code

Detay

  • Settings sayfamız da kullandığımız widget’ı base alarak kulladığımızı unutmayalım.
  • TextStyle’ları ortak bir alandan çağırdık ve bu sayede code’ların bir alandan yönetilmesini sağladık.
  • Elevation çok önemli bazen sayfalarda gri bir renk görürseniz muhakkak oralarda bir elevation değeri vardır.
  • Appbar’da sayfanın status bar’ını beyaza çevirmek için Brightness light değeri atıyoruz.

Veee biterr 💘

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

Bir sonraki yazıda görüşmek üzere.

Sevgilerimle 🔥

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