Preparation of detail screen design

In this learning content, we will prepare the mobile screen design where the information of the employee is transferred in detail.

First of all, let's examine the completed detail screen.

There is a simple header at the top of the detail screen. In the header, there is a Label element with the screen name and an exit icon that allows you to close the screen.

Under the header, we see that the Image element is used for photo information for the employee, and the Label element is used for name, surname, department, and other headings.

Now, let's prepare a similar detail screen together.

1. Create a new screen named EmployeeDetail via the Screens panel.
2. Drag and drop a Header element to the screen you created.
3. Drag and drop a Row element into the Header.
4. Convert the Row element into a single-column structure.
5. Add a Horizontal Stack element inside the column.
6. Drag and drop an icon element and a label element into the Horizontal Stack element.
7. With the icon element selected, select an icon from the icon library.
8. Then, give the icon element a padding value of 8 Pixels in 4 directions from the Layout area of the Styling panel.
9. Change the color of the icon.
10. Edit the background color of the icon in the Fill field and add the Radius preset style to your icon in the Border field.
11. After working with the Icon element, double-click on the Label element and edit the text as Employee Details.
12. Delete the Size value of the Label from the Layout field of the Styling Panel.
13. With the Label element selected, add the H3 preset style in the Styling panel Text field.
14. Then select Horizontal Stack and center it vertically.

We have completed the header design; now, let's complete the design of the detail screen.

15. Drag and drop a Row element under the header and turn it into a single column.
16. Drag and drop a Row element into the column. Convert the Row into a two-column structure with the Properties panel and arrange it so that the columns are one below the other.
17. Set the background color of the Row element to White and add the Radius preset style from the Border area.
18. Add a Vertical Stack element inside the first column.
19. Add an Image element and a Label element inside the Vertical Stack.
20. Add a temporary image to the Image element via the Properties panel and select Fill from the ImageFit field.
21. Then, with the Image element selected, enter the Width value and Height value as 98 pixels from the Styling panel.
22. Add Radius_Full ready-made style from the Border field.
23. Click twice on the Label element under Image and enter a temporary name.
24. With the Label element selected, add the H3 preset style in the Text field of the Styling panel.
25. Select Vertical Stack and center it horizontally.
26. Add a Vertical Stack element to the second column.
27. Drag and drop a Horizontal Stack element inside the Vertical Stack element.
28. Then, add an icon and a label element inside the Horizontal Stack.
29. With the icon element selected, select the icon from the icon library and change the color of the icon from the styling panel.
30. Then, double-click on the label you added and enter a temporary department name.
31. Duplicate the Horizontal Stack containing the department information.
32. Change the icon in the new Horizontal Stack. Update the color of the icon you changed. Then, replace the Label text with a temporary Title.
33. Select the Horizontal stack element via BreadCrumb and Duplicate it.
34. Replace the icon in the newly added Horizontal Stack and do a color edit.
35. Double-click on Label and enter a temporary email address.
36. Delete the Label's Size value from the Layout field of the Styling Panel.
37. Select the Horizontal Stack element and Duplicate it again.
38. Then, change the icon and icon color.
39. Enter a temporary phone number in the Label.
40. Finally, Duplicate the horizontal Stack element containing the phone number information.
41. Replace the icon in the Horizontal Stack with an icon representing the date of birth and enter a temporary date of birth in the label.

With these operations, we have completed the detail screen design.

‍