Drawer

The Drawer widget is used to provide navigation to other pages. It opens up from the left side of the screen by swiping left to right or clicking the menu icon in the AppBar. It can be closed by clicking anywhere outside the drawer or by swiping left-to-right.

You can use the drawer widget when the space for showing the navigation options with other widgets like bottom navigation, or Tabbar is insuficient.

Drawer

Adding a drawer to your project

Here's an example of how you can use the drawer widget in your project:

1. First, drag the Drawer widget from the Page Elements tab (in the Widget Panel) or add it directly from the widget tree.

2. Add the Column widget from the Layout Elements tab inside of the Drawer.

3. Now add one Image widget inside the column and set its Width property to inf (Click on theicon) and Height property to 200.
4. Drag the ListTile widget from the Base Elements tab and drop it inside the Column (Below the Image widget).

5. Keep the ListTile widget selected, move to the properties panel, scroll down to the Title section, and then change the Text property to Page 1.

6. Scroll down below and find the Subtitle section. Inside the Text property, remove the text 'Lorem ipsum dolor...'.

At this point, you have one item added to the Column (inside the Drawer). To fill the Column with more items, copy-paste the ListTile widget and change the Text property to Page 2, 3, and so on.

To copy-paste a ListTile widget:

1. Select the ListTile widget.

2. Right-click on it and select Copy. You can also use the keyboard shortcut Ctrl+C or Command+C.

3. Select the Column widget.

4. Right-click on it and choose Paste. You can also use the keyboard shortcut Ctrl+V or Command+V.

After adding several ListTile, running the app looks like this:

Opening and closing drawer in editor

You may want to close the Drawer to focus on designing the rest of your screen.

To open/close the Drawer in the editor:

1. Select the Page Name from the Widget Tree (not the drawer).

2. Move to Property Editor (on the right of your screen) and find the Hide Drawer button.

3. Click on the Hide Drawer button to hide the Drawer.

4. Click on the Edit Drawer to get back the Drawer in the editor.

Opening drawer from an appbar

Here are the instructions on opening the drawer from an AppBar.

Open/close drawer on button press

You can open and close the drawer with a button press by adding the drawer action. You can find the instructions on the below page.

pageDrawer

Changing the properties

The Properties Panel can be used to customize the appearance of your Drawer widget.

Changing drawer width

You can adjust the drawer width to determine how much of the screen it should cover when it's opened, giving you control over its display area.

To change the drawer width, move to the Properties Panel > Drawer Properties > Width and enter the specific value or Set from Variable.

Changing the elevation of the drawer

To change the elevation (depth or Z-axis) of the Drawer:

1. Select the Drawer from the widget tree or the canvas area.

2. Move to Property Editor and find the Drawer Properties section.

3. Find the Elevation property. The larger the value, the more emphasis the drop shadow will have.

Show/hide Drawer

Please find the instructions to show/hide the widget here.