EndDrawer

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

You can use the EndDrawer widget when the space for showing the navigation options is not sufficient.

Adding an EndDrawer to Your Project

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

1. First, drag the EndDrawer 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 EndDrawer.

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 property selected and move to Property Editor, scroll down to 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 EndDrawer). To fill the Column with more items simply copy-paste the ListTile widget and change the Text property to Page 2, Page 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 select Paste. You can also use the keyboard shortcut Ctrl+V or Command+V.

After adding a number of ListTile, running the app looks like this:

Opening and Closing EndDrawer in Editor

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

To open/close the EndDrawer in the editor:

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

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

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

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

Opening EndDrawer from an AppBar

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

Changing the Properties

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

Changing the Width of the EndDrawer

Changing the width of the EndDrawer allows you to control how much area of the screen should be covered by the EndDrawer when it is opened.

To change the width of the EndDrawer:

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

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

3. Enter the value in the Width property.

Changing the Elevation of the EndDrawer

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

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

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

3. Find the Elevation property and enter the value to see the drop shadow effect below the EndDrawer. A higher value creates a larger shadow.

Show/Hide EndDrawer

Please find the instructions to show/hide the widget here