How to Customize the App Drawer in FlutterFlow

Click on your page canvas (not on any widget) to select the page itself. In the Properties panel on the right, scroll down to find the Scaffold section. Look for the Drawer toggle and switch it on. FlutterFlow will add a Drawer panel to your page widget tree, visible in the Widget Tree panel on the left side of the editor. The drawer is now accessible by swiping from the left edge of the screen or tapping a hamburger menu icon. If you want to add an AppBar with a hamburger icon that opens the drawer, enable the AppBar in the same Scaffold section and the menu icon will appear automatically.

Before adding any content, create a Reusable Component — this is the single most important step. In the left sidebar, click Components (the puzzle piece icon) and press the '+' button to create a new component. Name it AppDrawerContent. Inside the component, add a SafeArea as the root widget, then a Column inside it. Set the Column's width to 280px and add padding of 16px on all sides. This component will contain your entire drawer UI. On each page, instead of building the drawer directly, you will reference this component inside the page's Drawer panel.

Inside the Column in AppDrawerContent, add a Container with a background color using your app's primary color or a dark gradient. Inside it, add a Row containing a CircleImage widget (set source to 'Authenticated User' → photoURL) and a Column with two Text widgets: one for the display name (source: Authenticated User → displayName) and one for the email. Set the Container height to 180px to create a spacious header. Add a SizedBox with height 8 below the header container to separate it from the menu items. If the user has no profile photo, set a fallback image URL to a default avatar.

Below the header, add menu items for your main navigation sections. For each item, use an InkWell wrapping a Padding wrapping a Row. The Row contains an Icon widget (pick from Material icons) and a Text widget for the label, separated by a SizedBox width 16. Set the InkWell's OnTap action to Navigate to the target page. Alternatively, use FlutterFlow's ListTile widget which provides a ready-made layout with leading icon, title, and onTap. Add a Divider widget between logical sections of menu items. At the bottom of the Column, add a Spacer widget to push a Sign Out item to the bottom of the drawer.

Admin-only features should not appear in the drawer for regular users. In FlutterFlow, use Conditional Visibility on any menu item you want to restrict. Click the menu item widget, go to the Conditional Visibility section in the Properties panel, and add a condition. For role-based conditions, create an App State variable named userRole (String) populated when the user logs in (query their Firestore user document for a role field). Show admin menu items only when userRole equals 'admin'. For premium features, show or style the item differently when userRole equals 'premium' — for example, show a Lock icon next to premium-only items for free users.

Now that your AppDrawerContent component is complete, add it to every page. On each page, click the Drawer panel in the Widget Tree (it appears after the page body). Inside the Drawer panel, add your AppDrawerContent component from the Components list. If you added an activePage parameter to the component, pass the current page name as the parameter value — this highlights the active item in the menu. For a new page, the process takes under 30 seconds: enable Drawer in Scaffold → add AppDrawerContent component. All styling and logic updates automatically across all pages when you edit the component.