Form Ekranının Tasarlanması

Bu öğrenme içeriğinde, mobil uygulamayı kullanarak yeni bir fikir kaydı oluşturmayı sağlayacak form ekranını birlikte oluşturacağız. 

Şimdi hazırlayacağımız Yeni Fikir ekranını inceleyelim.

Ekranın en üstünde sayfa adının yer aldığı bir Label ve bir önceki ekrana dönüş için ikon içeren basit bir Header bulunuyor. 

Header'ın altında, veri girişine olanak tanıyan SelectBox ve TextInput gibi Input tipi form elementleri yer alıyor. Form elementlerinin altında ise eklenen fikre ait görsellerin listelendiği GalleryView elementi, Image elementleri ve form girişi sonrasında verilerin kaydedilmesini sağlayacak bir button elementi bulunmaktadır.

Ekranın en altında ise daha önce oluşturduğumuz Tabbar yer almaktadır.

Şimdi adım adım bu ekran tasarımını oluşturalım.

1. Screens panelinden New Suggestion adında yeni bir ekran oluşturun.
2. Ekrana bir Header elementi sürükleyip bırakın. 
3. Header’ın arka plan rengini Background seçimiyle değiştirin.
4. Header içerisine bir Row ekleyin ve iki kolonlu bir yapıya dönüştürün.
5. Soldaki kolon içerisine bir Label ekleyin ve içeriğini güncelleyin.
6. Ardından Styling paneli Text alanından H3 stilini ekleyin.
7. Label’ın bulunduğu kolonu seçin, sola hizalayın ve dikeyde ortalayın.
8. Şimdi sağdaki kolona bir Icon elementi ekleyin ve Icon seçimi yapın.
9. Icon elementinin bulunduğu ebeveyn kolonu seçin ve sağa hizalayarak dikeyde ortalayın.

Header tasarımı hazır. Form yapısıyla devam edelim.

10. Ekrana bir Row sürükleyin.
11. Row’u tek kolona dönüştürüp varsayılan gelen Padding stilini kaldırın ve None stilini ekleyin.
12. Kolon içerisine bir row sürükleyin.
13. Row’u tek kolona dönüştürün ve Row’da varsayılan olarak gelen Layout stilini kaldırıp None stilini ekleyin.
14. Kolon içerisine bir Selectbox ekleyin.
15. SelectBox’un Placeholder metnini güncelleyin.
16. Ardından Border alanından InputBorder stilini seçin.
17. SelectBox’un ebeveyni olan dıştaki Row’u seçin ve Duplicate edin. 
18. SelectBox’u kaldırıp TextInput ekleyin.
19. TextInput’un Placeholder metnini güncelleyin.
20. Tıpkı SelectBox’da olduğu gibi TextInput’un Border alanından InputBorder stilini seçin.
21. TextInput’un ebeveyni olan Row’u seçin ve Duplicate edin. 
22. Duplicate olarak gelen TextInput’un Placeholder metnini güncelleyin.
23. TextInput’un ebeveyni olan Row’u seçin ve Duplicate edin. 
24. TextInput’u silin ve Type seçimindeki SelectBox’u kopyalayıp buradaki kolona yapıştırın.
25. Placeholder metnini güncelleyin.

Şimdi Görsel yükleme alanının tasarımını hazırlayalım.

26. Form yapısının hemen altına bir Row ekleyin ve tek kolona dönüştürün.
27. Row’da varsayılan olarak gelen Layout stilini kaldırıp None stilini ekleyin.
28. Kolon içerisine bir Row sürükleyip, bırakın. 
29. Row’u seçin, sol kolonun daha geniş olduğu iki kolonlu bir yapıya dönüştürün.
30. Varsayılan gelen Row stilini kaldırın.
31. Row’un arka plan rengini beyaz olarak değiştirip, Border alanından sol ve sağ üst köşelere 12 Piksellik Radius ekleyin
32. Sol kolon içerisine bir Label ekleyin içeriğini güncelleyip, H3 stilini ekleyin.
33. Label rengini değiştirin.
34. Ebeveyn kolonun hizalama işlemlerini yapın.
35. Sağdaki kolon içerisine bir Button elementi ekleyin ve buton içeriğini güncelleyip, buton ikonu seçin.
36. Ardından Styling panelden Button Secondary seçimi yapıp, arka plan rengini kaldırın.
37. Border rengini değiştirerek dört yönde 1 piksel genişliğinde düz bir kenarlık ekleyin.
38. Ebeveyn kolonun hizalama işlemlerini yapın.
39. Label’ın ve Button'ın bulunduğu Row altına bir Row daha ekleyin.
40. Row’u tek kolona dönüştürün ve varsayılan gelen Padding stilini kaldırıp, None seçimi yapın. 
41. Kolonu seçin ve arka plan rengini değiştirin.
42. Kolon içerisine bir GalleryView ekleyin.
43. GalleryView’in Mobil görünümde kolon sayısını 3 olarak güncelleyin.
44. GalleryView içerisine bir Row ekleyin ve tek kolona dönüştürün.
45. Row’un varsayılan olarak gelen Padding stilini kaldırıp None stilini ekleyin.
46. Kolon içerisine bir Image elementi ekleyin ve ImageFit özelliğini güncelleyip, Image64 seçimi yapın. 
47. Blok görünümünü seçin.
48. Border alanından Radius stilini seçin.
49. Image’in bulunduğu ebeveyn kolonu seçin ve hizalama işlemlerini gerçekleştirin.

Görsel yükleme alanı sonrasında Kaydetme/Oluşturma butonunu hazırlayalım.

50. Görsel yükleme alanının altına bir Row sürükleyip tek kolona dönüştürün.
51. Row stilini kaldırın, None stilini ekleyin.
52. Kolon içerisine bir Button sürükleyip bırakın.
53. Metin içeriğini güncelleyin.
54. Buton seçiliyken Block seçimi gerçekleştirin ve ButtonBorder seçimi yapın.

Şimdi daha önce hazırladığımız Tabbar menüyü buraya kopyalayalım.

55. Ekrana bir Footer sürükleyin.
56. Dashboard ekranını açın.
57. Tabbar menü tasarımını yer tutucusu olan Row’u kopyalayın.
58. Form ekranına dönün.
59. Footer’i seçin ve yapıştırın.
60. Icon renk düzenleme işlemini gerçekleştirin.

Mobil uygulama için Form ekranınız hazır.