Replicating Foodora UI in .NET MAUI – Part 4

This is the final post in my series of replicating the UI for the Foodora app using .NET MAUI. In this post I’ll replicate the final page, namely the page that shows the details of a specific dish.

The original design of the fourth page of the app.

Breaking it up

We’ll start by creating some sections:

Image section

The highlighted image section.

The image section is pretty identical to the one in my previous post (part 3). The only difference here is that I removed some of the buttons on the right.

Info section

The highlighted title section.

The info section shows the dish name, price and contents. It also contains a Line, which currently – as of RC1 – has a bug where it won’t show if it’s completely horizontal or vertical. That’s why I set Y2="1", to give it some elevation in order for it to appear. I’ve omitted X1 and Y1, since their default values are zero.

Selection section

The highlighted selection section.

The next section is where the user can customize their dish. This section uses both radio buttons and checkboxes. The radio button doesn’t seem to work properly on Android. You can’t click it and you can’t seem to change the color of it, but testing it on Windows shows that you at least can click it there.

Bottom section

The highlighted bottom section.

The bottom section lets you add the dish to your shopping cart. It also displays the number of dishes you ordered and lets you increase or decrease it. The plus and minus buttons should actually be of type ImageButton, but since it currently has an issue with displaying font icons, I am using Label for purposes of demonstration.

Wrapping up

This concludes my four part series in replicating the Foodora app UI. I’ve learned a lot about .NET MAUI using this method and I hope you have too. It really shows how it’s evolved from Xamarin.Forms and what kind of “shortcuts” you can take now without feeling like you’re doing nasty hacks. The code for all the parts are on my GitHub, so feel free to check out the full sample there. Thanks for sticking through!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.