Sunny: how it is made

Sunny is a bright, friendly rewards app: quests in colored cards, coins, a treasure chest and a stamp card. This page shows where its main tricks live in the editor and how to repeat them on your own screen.

You get Sunny by copying it from the gallery of ready apps (Getting started). Select a widget on the canvas or in Tree; the names in code below are the names you see in the tree.

The screens#

Screen	What it is	Where it leads
`Home`	The greeting, the level card, quick actions, the streak, a carousel of quests, the treasure chest, recent activity	To `Quest`, to the sections
`Quest`	One quest: a hero picture, status chips, the reward, a stamp card and steps	Back to `Home`
`Rewards`	The coin balance and the list of rewards	The sections
`Profile`	The person, statistics and the history	The sections

Home, Rewards and Profile are the three sections of Bottom navigation; Quest opens on top of the section you were in.

How the level card is made#

On Home select Level section, a Stack of two layers. The first is Level card; the second is an Image (art.emblem) that lies over the card in a corner.

Inside the card a confetti Image bound to art.confetti is the lowest layer, and a Column with Layer size set to Whole stack lies over it with the texts and the bar.
The bar is a Progress bar bound to user.tierProgress; its Fill gradient is sunFill. The sentence under it is a Template: {left} {unit} to {next}.
The emblem has Layer place set to Own place: it is aligned to the top end corner and shifted by a set amount.

To repeat: put the card and the emblem into a Stack, choose Own place for the emblem, align it to a corner and set the shift.

How the colored quest cards are made#

Quests list is a Data list with the Source quests and Carousel turned on: one card in view, the next card shows a little, and dots below. All cards come from one template, Quest card. The colors do not come from the document: the record has a field quest.color (mint and so on), and the card has States. A state says “when quest.color equals mint, the background is this color”. The text of the button inside has a state too, so it turns darker on a light card. The app bar on Quest does the same.

To repeat: draw one card, open States, press Add state and choose the field and the condition; set the background in the state. Add one state per color.

How the pictures lie over the card#

The card has two images: a large one (quest.art) and a small object (quest.object) with Layer place set to Own place in the corner, over the large one. Both are From data, so a quest brings its pictures. The Quest screen starts with Quest hero image and Quest title card: the card has Over the previous one set, so it overlaps the picture by a set amount.

How the stamp card is made#

On Quest, Stamp card holds Stamps: five columns. Each column is Conditional on quest.target being greater than its number — a quest of three stamps shows three. The circle inside has a States entry on quest.progress (filled when the progress is above its number), and the number is shown only while it is the next stamp.

The steps#

Step 1, Step 2 and Step 3 are three rows with the same logic: a border and a check by States and Visibility on quest.stage, a muted text for steps that are not yet open and a Badge “Now” on the current one.

The pinned button#

Pinned action bar has Pinned to the bottom set to Pinned: the button Continue quest stays visible under a long screen. The bar of sections is not counted.

Data#

Sunny reads user.* (name, picture, level, points, progress), streak.*, chest.opensIn, the pictures art.* and the lists quests, activity and rewards.

Above the canvas open the Scenario list and choose Configure values…: change streak.days to see the week fill, set a list to Empty to see the empty state, and choose No data to see all fallback texts. All states puts these phones side by side. More: Data, Style.