FlutterFlow Docs
Search…
⌃K

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:
  • 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 widget selected, move to the properties panel, scroll down to the 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, copy-paste the ListTile widget and change the Text property to Page 2, 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 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:
  • 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

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.

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 covered by it when it is opened.
To change the width of the Drawer:
  • Select the Drawer from the widget tree or 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 the canvas area.
  • Move to Property Editor and find the Drawer Properties section.
  • Find the Elevationmore enormous

Show/hide Drawer

Please find the instructions to show/hide the widget here
Last modified 5mo ago