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 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.
To finish, let’s continue with the last block, which is made up by the following components:
✔ Rounded photo, name, role and date.
✔ Like and adopt buttons.