Pages and Widgets Panel

🧱 Page Selection & Widget Tree

This panel gives you full control over your app’s pages and UI structure. It’s divided into two main sections — Page Selector and Widget Tree — which help you manage and build your app's interface efficiently.

---

📄 Page Selector

At the top, you’ll see the currently selected page name (e.g., HomePage) with a dropdown indicator.

Features:

• Clicking the page name opens a dropdown to view and switch between different pages and components.

• ➕ Plus button on the top right:

  • Add a new page

  • Add a reusable component

• Helps you organize your app’s structure by grouping screens and reusable UI elements.

---

🌲 Widget Tree

Below the page selector is the Widget Tree, a visual hierarchy of all the widgets present on the selected page.

Features:

• Displays the structure of the UI in a tree format.

• Each widget (e.g., image1, text1, button1) is shown as a node under parent widgets (e.g., column1, body, HomePage).

• Sections like appBar, body, and bottomNavigationBar are automatically detected where applicable.

What You Can Do:

• Add Widgets: Click the ➕ icon beside any widget to add a child widget inside it.

• Reorder Widgets: Drag and drop widgets to reorganize layout or nesting.

• Edit Widget Names: Rename widgets for better readability and maintenance.

• Right-click Options (or long-press):

  • Delete

  • Copy / Paste

  • Duplicate

  • Wrap with container or column

  • Move up/down

📝 Tip: Use the search icon to quickly locate widgets in large trees, and the sort icon to organize or collapse sections.

---

This panel is your central workspace for defining and managing how your app looks and behaves.