# Right-Click Menu in Design

The Right-Click Menu in **Design** provides a comprehensive set of functionalities for efficiently managing and manipulating components within your project.

You just have to right-click in Design, the menu will appear.

<figure><img src="/files/LAjhqY2J03ir4vuK8ZxP" alt="right-click menu"><figcaption><p>right-click menu</p></figcaption></figure>

### **Add Logic**

Opens the Logic Panel, a robust system enabling the creation of logical workflows around designs and interactions. The Logic Panel supports a diverse range of nodes, including variables (e.g., strings, integers) and SDKs hosted on **pub.dev.**

<figure><img src="/files/5HCzsfuGVSbzIOmGz3aD" alt="add logics"><figcaption><p>Add Logics</p></figcaption></figure>

### **Copy, Paste, and Delete**

#### Copy

Duplicates the selected component, including its entire structure such as containers, texts, and widgets. This feature is handy for replicating existing components within your design.

#### **Paste**

Inserts the previously copied component as a new independent instance. This allows for the creation of duplicates without affecting existing components, fostering flexibility in design.

#### **Delete**

Removes the selected component from the UI, deleting it entirely—a crucial function for component management and cleanup.

<figure><img src="/files/m61MvHqtXLOvMraTUXXi" alt=""><figcaption><p>Copy, Paste and Delete</p></figcaption></figure>

### **Copy and Paste Properties**

#### **Copy Properties**

Copies all properties of the selected component, excluding height, width, and widget-specific properties. This feature is useful for transferring styles and settings between components.

#### **Paste Properties**

Applies the copied properties to the selected component. This allows for the efficient transfer of styling and configuration settings.

<figure><img src="/files/NesynoFsREHoEpMd6VMU" alt=""><figcaption><p>Copy Paste Properties</p></figcaption></figure>

### **Copy Page, Paste Page, and Delete Page**

#### **Copy Page**

Duplicates the current page, facilitating the replication of entire layouts or structures.

#### **Paste Page**

Inserts the copied page as a new page, allowing for the seamless duplication of entire pages within your project.

#### **Delete Page**

Removes the current page and opens the last page before it. Useful for page management and navigation.

### **Sent Backward/Forward**

#### **Sent Forward**

Brings the selected component one layer above its current position in the layer hierarchy, adjusting the visual stacking order.

#### **Send Backward**

Pushes the selected component one layer below its current position in the layer hierarchy.

<figure><img src="/files/0YDlCohozldbe2l2afLf" alt=""><figcaption><p>Sent Backward/Forward</p></figcaption></figure>

### **Sent to Front/Back**

#### **Sent to Front**

Brings the selected component to the top layer of the UI, making it visually the foremost element.

#### **Sent to Back**

Pushes the selected component to the bottom layer of the UI, making it the visually rearmost element.

<figure><img src="/files/azOeG2yLRBplxiwrlIG8" alt=""><figcaption><p>Sent to Front/Back</p></figcaption></figure>

### **Group/Un-group**

#### **Group**

Groups one or more components together, creating a single top-level layer. Grouping facilitates the management of related elements as a unified entity.

#### **Ungroup**

Removes layers from the selected group, allowing for the disassociation of components within a group.

<figure><img src="/files/7AisAQaay3gcJeXG9FCT" alt="Group Un-group"><figcaption><p>Group Un-group</p></figcaption></figure>

### **ScrollView/Un-ScrollView**

#### **ScrollView**

Converts the currently selected component into a ScrollView—a view group used to make vertically scrollable views. Useful for creating scrollable sections within your design.

#### **Un-ScrollView**

Undo the ScrollView operation, reverting the selected component to its original state.

<figure><img src="/files/QQ8vfyORsh58Z4hXlrMu" alt="ScrollView-UnScrollView"><figcaption><p>ScrollView-UnScrollView</p></figcaption></figure>

### **ListView/Un-ListView**

#### **ListView**

Converts the selected components into a ListView widget, a versatile component for displaying a scrollable list of items.

#### **Un-ListView**

Undo the ListView operation, reapplying the conversion of selected components into a ListView.

<figure><img src="/files/qtfwVk71k97TBbXG8zJ9" alt="ListView-UnListView"><figcaption><p>ListView-UnListView</p></figcaption></figure>

### **PageListView/Un-PageListView**

#### **PageListView**

Creates a ListView of pages, allowing you to map indexes of the pages to different components. Users can navigate through these pages using the designated components.

#### **Un-PageListView**

Undoes the PageListView operation, reverting the selected component to its original state before the ListView of pages is applied.

<figure><img src="/files/DIU94kzXgWaR8F9B6d84" alt=""><figcaption><p>PageListView-UnPageListView</p></figcaption></figure>

#### Happy Learning!!

{% embed url="<https://open.spotify.com/playlist/0vvXsWCC9xrXsKd4FyS8kM?si=2c7f55bd3f944878>" %}
Lofi music
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.blup.in/wiki/design-ui/right-click-menu-in-design.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
