End Drawer – Flutter Widget

An End Drawer is similar to a standard Drawer, but it slides in from the right side of the screen instead of the left. It’s useful for secondary menus, filters, settings, or optional features.

Source Code​ 

				
					class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('End Drawer Example'),
        actions: [
          IconButton(
            icon: Icon(Icons.menu_open),
            onPressed: () {
              Scaffold.of(context).openEndDrawer();
            },
          ),
        ],
      ),
      endDrawer: Drawer(
        backgroundColor: Colors.white,
        elevation: 16,
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              decoration: BoxDecoration(color: Colors.teal),
              child: Text(
                'Options',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
            ListTile(
              leading: Icon(Icons.info),
              title: Text('About'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.help),
              title: Text('Help'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: Center(child: Text('Main Content Area')),
    );
  }
}

Ai Code Analizer

🎨 3. Important Properties Used

PropertyDescription
endDrawerWidget that appears from the right side when triggered.
Scaffold.of(context).openEndDrawer()Manually opens the end drawer via action (like button).
DrawerHeaderTop header section, usually for branding or info.
backgroundColorBackground color of the drawer.
elevationAdds shadow to create visual depth.
ListTileEach item inside the drawer (icon + title + action).
onTapCloses the drawer or performs a navigation/action.

🔧 4. Key Differences from Left Drawer

  • drawer opens from left by default.

  • endDrawer opens from right.

  • Requires manual trigger (e.g., openEndDrawer() inside AppBar or a button).

Share:

More Posts

Send Us A Message