Flutter HEALTHO UI -2

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

• Ekranda alt alta gelmesi gereken iki widget kullanılacak.
• 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

• Ekranda üst kısmından %20'lik dilimde olan bir text’e ihtiyacımız var.
• 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

• Diğer sayfalarımızda olduğu gibi bir alt alta alana ihtiyacımız var.
• 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

• Sayfamızı yine belirli bir alanda parçalamamız gerekiyor.
• 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 🙏