Skip to main content

Outline

The Outline Panel helps you visualize the full structure of your screen in a simple, tree-like view.
You’ll find it in the top-left corner of the Design Board.

It lists every widget in your screen — arranged in a nested hierarchy — just like it would appear in Flutter code.
This makes it easier to understand, navigate, and manage complex layouts without endlessly scrolling on the canvas.

What the Outline Shows​

Hierarchy of Widgets​

Every widget in your screen (Rows, Columns, Text, Buttons, GridViews, etc.) appears in order, showing how widgets are nested inside one another.

Visual Indicators​

The Outline uses helpful icons and colors to make it easier to understand your layout:

  • A yellow home icon next to a screen’s name means it’s set as the Home Screen.
  • Purple items represent Components, helping you identify reusable widgets at a glance.

Containers and Children​

You can expand or collapse widgets to explore their child elements — such as nested rows, columns, or items inside grids.
This is especially helpful when working with deeply nested UIs.

The Outline isn’t just for viewing — you can use it to navigate and manage your layout faster:

  • Double-click on any widget in the Outline to instantly center it on the design board.
  • Right-click any item to open a context menu that lets you:
    • Remove or duplicate widgets
    • Group or ungroup elements
    • Convert a widget into a reusable Component
    • Perform other quick layout actions — without leaving the Outline view.

Benefits for Designers​

  • Get a code-like overview of your layout — no coding required.
  • Reduce mistakes when working with complex, nested structures.
  • Edit faster by selecting and modifying elements directly.
  • Improve collaboration — everyone on your team can see the same layout structure at a glance.