Flutter HEALTHO UI -2

Veli Bacık
Jul 24 · 4 min read

Selamlar 🙋‍♂️
İkinci yayında sizlerle uygulamamızın ikinci kısmını çizeceğiz ve kullandığımız yapıları inceleyeceğiz. İlk yazıyı buradan okuyabilirsiniz.

Bu yazımızda ele alacaklarımız?

  • Verify View & Verification Code View
  • Phone Pin View
  • Register View
  • Select Goal View

1.Verify View

Analiz

  • Ekranın ortasının biraz üstünde olacak.

Development

  • Future.delayed Bizim için “Duration” property’si aracılığıyla sayfada timer kullanmamızı sağlar ve işlem bittiğinde “whenComplete” ile sync işlem yapmayı sağlamaktadır.
  • Navigator.pushNamed ise bizim “main.dart” da tanımladığımız sayfalara route etmeyi sağlar.
  • _isVerifyComplete property’si sayfa da işlem bittiğinde gelecek _succesView sayfasını göstermeyi sağlar.
  • Center ile sayfanın ortasına konumlandırıyoruz. Padding ile sayfada sağ ve sol taraftan margin değeri atıyoruz.
  • _verifyViewColumn ile progress , space , text widget’larını ekliyoruz.
  • _succesVerify ile tüm sayfayı öncelikle 10'luk düzende parçalıyoruz.
    2–6–2 yani %20 %60 %20 dilimlere parçalıyoruz ve succes icon , space,text ile succes sayfamızı tamamlıyoruz.

2. Phone Pin View

Analiz

  • Bize dörtlü bir pin text field lazım ve bu alanlara sadece bir değer girilmeli.
  • Pin’li alanlarda bir değer girildiğinde diğerine focus olmalı ve değer silindiğinde geri gelmeli.
  • Button’a basıldığında yeni sayfaya geçmeli.
  • VerifyButton’nun alt kısmında ki textler arasında boşluk bırakılmalı.
  • Görselde gördüğünüz tuş seti ise klavye açıldığında gelen kısım.

Development

  • _phoneInputVerify sayfası bizim için 20'lik dilimde sayfayı parçalayıp 10'luk 80'lik 10'luk bir şekilde parçalar. (flex değerlerini 1:8:1 olarak de verebilirdik.)
  • _inputPhoneView bizim için satırda eşit oranlarda bölüp “dairesel” görüntüyü vermek için oluşturulur.
  • _circleTextField() bizden 3 property’i alıyor node kendisi next bir sonraki back bir önceki.
  • _circleTextField ise bir textfield oluşturur maxLength 1 olan keyboardType’ı number olan bir alan. OnChanged ile eğer boş ise backNode ile bir öncekine focus olmakta , dolu ise bir sonrakine nextFocus ile gitmekte ( yeni satıra geçmek için : FocusScope.of(context).requestFocus(nextNode);)
  • İşlem başarılı olduğunda Future.delayed ile bir süre bekletip akışımıza devam ediyoruz.
  • decoration ile textField’ımızı formatlıyor istediğimiz tasarıma getiriyoruz. Filled property’si kapsamını genişletiyor. Counter text bizim için field’daki text uzunluğunu kapatıyor. Border’lar ise field çizim tasarımının bir parçası.
  • _nextButtonWrapFilled 50'lik bir button alanı yaratıp bunu width’te tam olarak kapsayan alan yaratmak için kullanılır.
  • _nextButton ile her sayfada kullanmak için tasarladığımız RoundedButtonWidget’ı kullanıyoruz.
  • İşlem başarılı olduğunda _succesVerifyView çağrılır ve bize icon,space,text alanını geri döndürür.
  • _isVerifyComplete ? _succesVerifyView : _inputPhoneView alanı ise sayfalarımızda setState ile değerimizi güncellediğimiz de state göre ilgili alanı döndürmek için kullanılır

3. Register View

Analiz

  • Sayfamızın üstten %20'lik bir alanında bulunacak.
  • Ortaklaşmış alanlarımızdaki olan rounded buttonu kullanacağız

Development

  • Sayfamızı 1–3–1 %20 %60 %20 olarak tasarlıyoruz.
  • Column widget ile tasarlayıp text, textfield, button ile ilgili alanımızı tamamlıyoruz.

4. Goals View

Analiz

  • Item’lar için card tasarımına ihtiyacımız var.
  • Seçili item’in rengini sarıya çekmeliyiz.

Development

  • _selectCardIndex ile dokunduktan sonra set ediyoruz.
  • initState de listemizin elamanlarınımızı ekliyoruz.
  • Sayfamızı tasarlarken spacer , ve expanded ile %20 %80 olarak bölüyoruz.
  • _goalCardList Listview.Builder kullanarak listemizi set ediyoruz.
  • _cardGoalItem da card tasarımını yapıp set ediyoruz.(Circle Avatar ile daire’yi sola atıyoruz leading özelliği sayesinde)
  • _cardOnTap bizim için herhangi bir list card’ına dokunulunca onu setState ile sayfamızdaki _selectCardIndex’e gelen değeri basıyoruz.
  • backgroundColor: _backgroundColor(index) : bizim için Listview ve item’ları generate eder.
    Burada bir index var bunu bizim card’larımıza veriyoruz.
    Bu card’ın aslında bir nevi id’si oluyor ve _backgroundColor(index) o cardın indexi ile sayfaki tuttuğumuz _selectCardIndex eşit ise onu sarıya çeviriyoruz.

Ve tasarımımızın ikinci kısmını bitirdik. Bir sonrakilerde buluşmak üzere…

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

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