Flutter Drawer Widget: All Properties in Detail

The Drawer widget in Flutter is used for creating a slide-in menu typically displayed on the left side of the screen. It is most commonly used for app navigation, offering users quick access to different sections of the app.

---

Properties of Drawer Widget

1. key (Key? key)

• Type: Key?

• Description: A unique identifier for the widget, used by Flutter's framework for efficient widget updates and tree management.

• Usage: Usually not required unless you're managing complex widget trees or need to maintain state efficiently.

Drawer(
  key: Key('drawer-key'),
)

---

2. elevation (double elevation)

• Type: double

• Default: 16.0

• Description: Controls the elevation of the drawer. This determines how much shadow is cast around the drawer and can be used to give the drawer a raised appearance.

• Usage: Lower values produce less shadow, while higher values give the drawer a more prominent shadow.

Drawer(
  elevation: 8.0,  // Controls shadow intensity
  child: ListView(),
)

---

3. child (Widget child)

• Type: Widget

• Description: The main content of the Drawer widget. It typically contains a ListView, ListTile, UserAccountsDrawerHeader, or custom widgets that represent your drawer's content.

• Usage: This property is required because it defines the content displayed inside the drawer.

Drawer(
  child: ListView(
    children: <Widget>[
      UserAccountsDrawerHeader(
        accountName: Text("John Doe"),
        accountEmail: Text("john.doe@example.com"),
      ),
      ListTile(
        leading: Icon(Icons.home),
        title: Text("Home"),
        onTap: () {},
      ),
    ],
  ),
)

---

4. semanticLabel (String? semanticLabel)

• Type: String?

• Description: A label used for accessibility purposes, which can be read by screen readers. This is useful when you want to make your app more accessible to users with visual impairments.

• Usage: This property provides a description of the drawer's action for accessibility.

Drawer(
  semanticLabel: 'Navigation Drawer',
  child: ListView(),
)

---

5. drawerEdgeDragWidth (double drawerEdgeDragWidth)

• Type: double

• Default: 20.0

• Description: Controls the width of the edge swipe area that can be used to open the drawer. The drawer opens when the user swipes from the edge of the screen, and this property defines how wide that swipeable region is.

• Usage: By default, it's set to 20.0 pixels, but you can adjust it to make the swipe area larger or smaller.

Drawer(
  drawerEdgeDragWidth: 30.0, // Makes the swipe area wider
  child: ListView(),
)

---

6. backgroundColor (Color? backgroundColor)

• Type: Color?

• Description: The background color of the drawer. If not provided, it defaults to the theme's primary color.

• Usage: You can customize the background color of the drawer to fit your app’s design.

Drawer(
  backgroundColor: Colors.blueGrey,  // Set a custom background color
  child: ListView(),
)

---

7. scrimColor (Color? scrimColor)

• Type: Color?

• Default: Colors.black54

• Description: The color of the scrim (the dimmed overlay) that appears when the drawer is open. The scrim helps users focus on the drawer content.

• Usage: You can adjust this color to suit the overall aesthetic of your app.

Drawer(
  scrimColor: Colors.black38, // Set a custom scrim color
  child: ListView(),
)

---

8. width (double width)

• Type: double

• Description: Defines the width of the drawer. By default, the width is set to 300 pixels, but you can modify it to fit your design needs.

• Usage: This is useful when you want to make the drawer narrower or wider than the default size.

Drawer(
  width: 250.0, // Set custom drawer width
  child: ListView(),
)

---

9. onChanged (ValueChanged<bool>? onChanged)

• Type: ValueChanged<bool>?

• Description: A callback that is invoked when the state of the drawer changes (i.e., when it opens or closes). The callback receives a boolean value indicating whether the drawer is currently open (true) or closed (false).

• Usage: Useful for performing actions when the drawer is opened or closed.

Drawer(
  onChanged: (isOpen) {
    if (isOpen) {
      print("Drawer is open");
    } else {
      print("Drawer is closed");
    }
  },
  child: ListView(),
)

---

Example with All Properties

Here’s an example that uses multiple properties of the Drawer widget to demonstrate how to customize it:

Full Example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Custom Drawer Example"),
        ),
        drawer: Drawer(
          key: Key('mainDrawer'),
          elevation: 10.0,  // Set shadow intensity
          backgroundColor: Colors.grey[200], // Custom background color
          scrimColor: Colors.black54, // Custom scrim color
          drawerEdgeDragWidth: 40.0, // Wider swipe area for opening the drawer
          semanticLabel: 'Main Navigation Drawer',  // Accessibility label
          width: 280.0,  // Custom width for the drawer
          child: ListView(
            children: [
              UserAccountsDrawerHeader(
                accountName: Text('John Doe'),
                accountEmail: Text('johndoe@example.com'),
                currentAccountPicture: CircleAvatar(
                  backgroundColor: Colors.white,
                  child: Icon(Icons.person, color: Colors.blue),
                ),
              ),
              ListTile(
                leading: Icon(Icons.home),
                title: Text('Home'),
                onTap: () {
                  Navigator.pop(context);  // Close drawer
                },
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
                onTap: () {
                  Navigator.pop(context);  // Close drawer
                },
              ),
              ListTile(
                leading: Icon(Icons.exit_to_app),
                title: Text('Logout'),
                onTap: () {
                  Navigator.pop(context);  // Close drawer
                },
              ),
            ],
          ),
        ),
        body: Center(
          child: Text('Main Content'),
        ),
      ),
    );
  }
}

Explanation:

1. elevation: We set the elevation to 10.0 to create a moderate shadow for the drawer.

2. backgroundColor: The background color of the drawer is set to a light grey (Colors.grey[200]).

3. scrimColor: The scrim color is set to Colors.black54 for a subtle dark overlay when the drawer is open.

4. drawerEdgeDragWidth: We increased the swipe area for opening the drawer to 40.0 pixels.

5. semanticLabel: We added a semantic label for accessibility, helping screen readers understand the purpose of the drawer.

6. width: We customized the drawer’s width to 280.0 pixels instead of the default 300.0.

---

Conclusion

The Drawer widget in Flutter is a powerful tool for creating side navigation menus. By understanding and using the various properties such as elevation, backgroundColor, scrimColor, and more, you can fully customize your app’s drawer to match your design needs.

In this blog, we covered the most common properties of the Drawer widget and how to use them to customize the drawer’s appearance and behavior. Now, you should be able to create a Drawer that fits seamlessly with your app's UI/UX.

Happy Coding😀!