FlutterFlow Docs
Search…
Drawer
The Drawer widget is used to provide navigation to other pages. The Drawer opens up from the left side of the screen by swiping left-to-right or clicking the menu icon in the AppBar. The Drawer can be closed by clicking outside of the Drawer or by swiping left-to-right.
You can use the Drawer widget when the space for showing the navigation options is not sufficient.

Adding a Drawer to Your Project

Here's an example of how you can use the Drawer widget in your project:
    First, drag the Drawer widget from the Page Elements tab (in the Widget Panel) or add it directly from the widget tree.
    Add the Column widget from the Layout Elements tab inside of the Drawer.
    Now add one Image widget inside the column and set its Width property to inf (Click on the
    icon) and Height property to 200.
    Drag the ListTile widget from the Base Elements tab and drop it inside the Column (Below the Image widget).
    Keep the ListTile property selected and move to Property Editor, scroll down to Title section and then change the Text property to Page 1.
    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 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:
    Select the ListTile widget.
    Right-click on it and select Copy. You can also use the keyboard shortcut Ctrl+C or Command+C.
    Select the Column widget.
    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 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:
    Select the Page Name from the Widget Tree (not the drawer).
    Move to Property Editor (on the right of your screen) and find the Hide Drawer button.
    Click on the Hide Drawer button to hide the Drawer.
    Click on the Edit Drawer to get back the Drawer in the editor.

Opening Drawer from an AppBar

To open the Drawer without an AppBar widget, you have to swipe left-to-right on the page. This could be a little confusing to users since they don't have any signal that the Drawer exists. This can be solved by adding the AppBar widget. Once you add the AppBar, the AppBar automatically shows the menu icon (icon with three lines) button in the Leading section.
To add an AppBar:
    Select the Page Name from the Widget Tree.
    Drag the AppBar widget from the Page Elements tab (in the Widget Panel) or add it directly from the widget tree.
You can now open the Drawer widget by clicking the menu icon in the AppBar.

Changing the Properties

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

Changing the Width of the Drawer

Changing the width of the Drawer allows you to control how much area of the screen should be cover by the Drawer when it is opened.
To change the width of the Drawer:
    Select the Drawer from the widget tree or from the canvas area.
    Move to Property Editor and find the Drawer Properties section.
    Enter the value in the Width property.

Changing the Elevation of the Drawer

To change the elevation (depth or Z-axis) of the Drawer:
    Select the Drawer from the widget tree or from the canvas area.
    Move to Property Editor and find the Drawer Properties section.
    Find the Elevation property and enter the value to see the drop shadow effect below the Drawer. A higher value creates a larger shadow.
Last modified 1mo ago