Screens & Widgets

Screens

The Screens panel lists every screen in the design. One is the home screen, marked with a house — it is where the exported app opens, unless the design has bottom navigation.

Each screen becomes one Dart file and one route in the exported project.

Layers

Layers shows the current screen’s widget tree. Selecting a layer selects it on the canvas and the other way round. Drag a layer to move it — into a container, or between siblings.

A blue dot beside a layer means it carries a data binding or a tap action. Unnamed layers show their kind; you can rename any of them, and asking the assistant to “name these layers” will do a whole subtree at once.

The widget palette

Click a widget to insert it at the current selection, or drag it onto the canvas to place it exactly. Widgets fall into four groups:

Some widgets have rules: a button holds exactly one child, a list holds one row template, tabs hold two to five panels. Dropping something where it cannot go is refused rather than accepted and broken later.

Layout

Position comes from the layout, not from coordinates. A column stacks its children; a row places them side by side; align and justify decide where they sit within it, and gap and padding decide the spacing.

A Spacer pushes what follows it to the far end. Expand to fill makes an element take the remaining space.

Width and height are available on everything, and deliberately empty by default: a fixed height is a promise about content that has not been written yet, so the Checks panel warns when content is likely to exceed one.

Colours and text

Backgrounds and borders take a token rather than a raw colour — surface, card, subtle — plus any colours you add in the Palette panel.

Text uses heading, body or caption. Tokens travel into the exported project as a single theme file, so changing one changes the app everywhere.

Devices

The pill above the phone switches the device you are designing against — iPhone SE through iPad, Pixel and Galaxy. It is a lens, not a setting: the design does not change, you are simply checking whether it holds up at 360 points wide as well as 430.

Images

An Image or Avatar takes a URL, or you can upload one from the Source section — it goes to your project’s storage and the URL is filled in for you. Uploading needs a project, so it is not available in the public demo.