Esboçando o Layout do Cartão de Perfil

Before you write a single line, picture the screen. A quick sketch turns a vague idea into a clear plan you can build with confidence. 📝

Your profile card shows a few key things: an avatar, a name, a short bio, some stats, and a follow button. That list is your content inventory.

Compose lays things out as nested boxes. Each piece of content lives in its own region, and regions nest inside larger ones. Start by drawing those boxes.

Most cards read vertically: avatar on top, name below, bio under that. A Column stacks children top to bottom, so it will be your outer container.

The whole card sits inside one Column. Everything you add becomes a child of it, in the order you write them.

The stats line shows counts next to each other, not stacked. Anything that sits horizontally belongs in a Row nested inside your Column.

Sketch a Row holding three little blocks: posts, followers, and following. Each block is its own tiny piece of the card.

The follow button is the last item, full width at the bottom. In your sketch it sits as the final child of the outer Column.

Give each region a name: header, bio, stats, action. Naming sections now makes turning the sketch into Composables almost automatic later. ✨

A good sketch marks the gaps too. Note where you want padding around the card and space between sections so it never feels cramped.

Your sketch maps directly to a Composable tree: outer Column, then header, bio, stats Row, and button as children in order.

Which container best fits items that should sit side by side?

You sketched the card as nested boxes: an outer Column with a header, bio, a stats Row, and a follow button. Next you will turn that plan into real Composables.