Playing Cards - The Flutter Way

In this section, you will learn how to create your own customised cards. If you have been playing around with Flutter for more than a couple of weeks or a month you might have gone through these kind of open sourced card designs:

Credits: The Planet UI — Card

Credits: Flutter Audio Books Card UI

If you are currently in the learning phase where you cannot think and build logic about these kind of UI(s), this section will primarily teach you not only how to make these, but also how to think the logics too!

Points to follow: 1. Break down the UI in terms of basic widgets(Container, Row, Column). 2. Figure out the minute details, if any. 3. Finalise what are the Widgets that you will require. 4. Keep improvising while you code (adding Padding and alignments).

We will now see how this looks simple Card Example.

A Basic Card Widget in Flutter

Now, wonder if you wanted to break this Card Widget more, into basic elements, what elements will you use?

You have 2 options to break this UI down:

Use a Container widget, wrapped with Material Widget and set some elevation. Use a Container widget, and give it a box shadow, so as to mimic the shadow effect produced by the elevation parameter. This trick often comes handy!

Now, it’s Time to figure out the minute detail! Want to take some time to think? You got it……Think! (You can scroll up and see the image, what you missed)

Don’t Scroll if you haven’t figured it out yet. Think!

If at first you don’t succeed, stop trying already. You’re probably dumb. Let me help you. 😆

JUST KIDDING. You are doing great, brainstorming your way into the core widgets of Flutter. So, now about the minute detail that we missed before was the rounded corners of the card!

Container + Shadow + Rounded Corners = Card

Preview UI

If you are like, “Ah! it was a piece of cake!”, we will now move on to the second phase of this section and practice breaking down a bit complex UI, the Planet Card into it’s elements.

Never knew breaking planets were this easy!

Without spending much time on this exercise, I will just quickly explain, the messy image you see up there.

White Border: Its the base of the design, the container with its height, width, color and borders made circular(the minute detail you left out last time).

Orange Border: You see in the design that the elements are aligned both horizontally and vertically. The Pink borders are the Row, and you will notice that we have multiple Rows and they are aligned vertically. So, from here you get a hint that the child of the Container will be a Column and not a Row.

Pink and Green Borders: These are the children of the Column, all vertically aligned, and the green bordered elements are the children of either the Column or the Row.

Widget Tree of the above UI (excluding Stack for the Planet image)

You can now try and understand the above widget tree by comparing to the division of elements in the Planet UI Card. It will enhance your knowledge of how widget trees are made and painted on the screen by the Skia Engine.

With this, we come to the end of the second section of this blog, enriching you with the idea and logic of how you can break down widgets into basic founding elements of Flutter, and customise it for your own use.