# 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.

### **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.**

### **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.

### **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.

### **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.

### **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.

### **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.

### **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.

### **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.

### **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.

#### Happy Learning!! {% embed url="" %} Lofi music {% endembed %}