Dashboard screen design

In this learning content, we will prepare the Dashboard screen of the mobile application, which we started with Tab Bar Menu design. 

As a first step, let's review the features of the Dashboard screen we are targeting. 

The Dashboard screen has a Header with the app logo and a notification icon where you can open the notification screen. Below the Header, there is a summary Board showing both the number of all ideas and the number of ideas created by the logged-in user only. 

At the bottom of the screen, there is a list structure showing the recently added ideas. To create this list, we will use the Gallery View element from the Data Repeater category.

At the bottom of the screen is the TabbarMenu we created earlier, which allows navigation within the app.

Now let's create the Mobile Dashboard screen design together.

Let's start with the header.

1. Delete the Row element on the screen.
2. Add a Header element to the screen.
3. Change the background color of the Header with Background selection.
4. Drag and drop a Row into the Header and turn it into two columns.
5. Drag and drop an Image element into the left column.
6. Add a temporary image to the Image element.
7. Then choose the Image32 style and select Radius from the Border field.
8. Select the column with the Image element and align it.
9. Drag and drop an icon element into the column on the right.
10. Select the icon and align in the column where the icon is located.

We have prepared the header design. Now let's prepare the card structure.

11. Drag and drop a Row on the screen.
12. Turn the Row element into two columns.
13.  Drag and drop a panel element into the left column.
14. Add the padding ready style to the panel.
15. Select the background color as white and add the Radius style.
16. Drag and drop a Row into the panel and convert it to a single column.
17. Remove the Row preset style and add the None style.
18. Add a Horizontal Stack inside the column and set the Gap value to 6.
19. Add an Icon element and a Label element inside the Horizontal Stack element respectively.
20. Select an icon for the Icon element and then update the text in the Label element.
21. Select the Label element and remove the default width of 100 pixels.
22. Remove the Paragraph style and select the H6 style.
23. Select the Horizontal Stack and center it vertically.
24.  Select the Horizontal Stack's parent column and align it left horizontally and center vertically.
25. Drag another Row into the panel element and convert it to a single column.
26. Remove the Row preset style and add the None style.
27. Add a Label inside the column and update its content.
28. With Label selected, remove the Paragraph style and select the H1 style.
29. Select the parent column and do the alignment.
30. Now select the panel element and duplicate it.
31. Drag the panel element down and drop it into the column on the right.
32. Update the Icon and Label contents.

With these steps, we have the card view. Now let's create the gallery structure that allows us to list the final ideas. 

33. First, add a Row element to the screen, just below the card structure, and convert it to a single column. This Row will act as a global placeholder for the gallery structure.
34. Select the column and remove the default Column style and add the None style.
35. Add a GalleryView element inside the column.
36. Drag a Row into the GalleryView and convert it to a single column.
37. While the column is selected, give it a White background and add the Radius style.
38. Add a Row inside the column and convert it to a two-column structure with the left side wider.
39. In the Row, remove the Row style and select the None style.
40. Add a Horizontal Stack in the first column on the left.
41. Center the Horizontal Stack you added vertically.
42. Add an Image element and a Vertical Stack inside the Horizontal Stack.
43. With the Image element selected, add a temporary image from Properties and update the ImageFit selection.
44. Reset the default width value in Styling, select Image 32 style and Radius Full style.
45. Select the Vertical Stack element and update the Gap value to 1.
46. Align it horizontally to the left via the Styling panel.
47. Then add a Label inside the Vertical Stack Duplicate the Label.
48. Enter name information for the first label and select H3 as Text style.
49. Enter the title for the second Label and select H6 as the Text style.
50. Drag a Label to the second column.
51. Update the Label value.
52. Make the relevant selections from Layout, Text, Fill and Border fields for the Label and perform style edits.
53. Select the column with the Label.
54. Align right horizontally and center vertically.

Now let's prepare the area where the final ideas are listed in the image and title area.

55. Add another Row in GalleryView and turn it into a single column.
56. Remove the Row style from the Row and select the None style.
57. Add an Image element inside the column. Add a temporary image and update the ImageFit selection.
58. With the Image Element selected, set Width to 300px, Height to 200px in Layout and select Radius style in Border. 
59. Add a Label element to the column with the Image element. 
60. Update the content of the Label element and select H6 in the Text field.

After the image and idea title area, let's design the area that contains the support (votes), comments and information about the people involved.

61. In the GalleryView, add another Row under the Row with the Image element and select the structure where the left column is wider than the right column.
62. Remove the Row style from the Row and select the None style.
63. Add a Horizontal Stack in the first column.
64. Update the Gap Value of the Horizontal Stack to 24.
65. Add a Horizontal Stack inside the Horizontal Stack
66. Inside the Horizontal Stack element, add an Icon element and a Label element respectively.
67. Select an icon for the Icon element and then update the text in the Label element.
68. Select the Label element and remove the default width of 100 pixels and select H6
69. Select the Horizontal Stack element and center it vertically.
70. Update the Gap value to 6.
71. Duplicate the innermost Horizontal Stack.
72. Update the contents of the duplicate icon and Label.
73. Select the parent column of the Horizontal Stack element and center it vertically.
74. Select one of the innermost Horizontal Stack elements and copy and paste it into the second column.
75. Update the icons and text.
76. Select the parent column of the Horizontal Stack element and center it vertically.

‍

With these operations, your Mobile Dashboard screen is ready.