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:
Defining the main structure: To start developing the complete design structure that will contain our first screen I will use a Grid. It’s important to note that we are using a ScrollView to prevent complications when viewing on small screens.
Once the main structure is defined, let’s start!
To replicate the first block we’ll be dividing into three parts:
1⃣ Frame with price information
2⃣ Main image
3⃣ Indicator Bar
And then, as we see below, let’s create the three styles that will be applying to our controls: MainAmount, SecundaryText, and DivisionLine.
2⃣ Now, let’s continue with the Main image
3⃣ And finally, let’s add the indicator Bar. To do it, I used a PancakeVew! 💕
I love the part that comes now !! 😍 Because Shapes help us give the “Invoice” look we need! To get the shape of the rounded edges where the Frames meet, I created two circles and played with the Translation properties. Let’s see! 👀
To replicate, let’s divide into parts: Product List, Amount of products and the Rounded Border (With Shapes 💕). The first one is the Product list implementation:
The second one is the Amount of products part. Keep in mind that this part must the added in the block code previously added, exactly where says: “<!– Here add the code that is being explained in the next step–>”
And finally, the Rounded Corners with Shapes 😍!
In the third block, we will develop the timeline of our App! 😎.
Finally, let’s add the Payment buttons block. It’s important to see FormattedText, it helps us to create a single label with different characteristics. 😎. 😎.