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 🙏
