Before starting, to get the best out of the post, I’ll leave you some instructional notes so that you have a better experience reproducing the UI:
Let’s start!
Let’s divide the original design into blocks
To better understand, I have divided the original design into blocks, which are listed in the order in which we will be reproducing each one, these are:
First, let’s define the main layout we’ll be using!
In this case, we will use a Grid to structure the screen as you can see in the following code block:
⚠ If you want to know more information about the Grid, I invite you to see this article.
Let’s start with the Blocks!
The first one is the Profile Picture, here we just have to add the profile image of the Pet.
.
.
To begin with, we will divide this block into sub-blocks, each one of them will go with its explanation followed by its code implementation, let’s explore it:
Frame and main Grid of the Pet Card
Let’s evaluate the goals:
✔ Rounded edges, these are the rounded edges that can be seen at the top of the image, for this we will use a Frame.
✔ Overlapping of controls, to achieve the effect of overlapping we will use the Margin
property, to which in the Top value we will assign a negative value to achieve the effect of being above the image of the previous block.
Now let’s see it in code:
Let’s add the controls to the Frame
Now we will add the general information contained within the Frame, information such as main name, address, among others.
![La imagen tiene un atributo ALT vacío; su nombre de archivo es Step3_Details-1024x60.png](https://askxammy.com/wp-content/uploads/2022/06/Step3_Details-1024x60.png)
To finish, let’s continue with the last block, which is made up by the following components:
✔ Rounded photo, name, role and date.
✔ Description
✔ Like and adopt buttons.
![](https://askxammy.com/wp-content/uploads/2018/07/if_github_317712.png)