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😀!

Comments

Post a Comment

Popular posts from this blog

Url Launcher using Flutter

-
Image
  Exploring the URL Launcher Package in Flutter: A Comprehensive Guide Introduction: In the world of Flutter app development, integrating external functionalities like opening URLs, making phone calls, sending emails, and more is essential for creating robust and user-friendly applications. This is where the URL Launcher package comes into play. This package provides a simple and efficient way to interact with external resources and services directly from your Flutter app. What is a URL Launcher? The URL Launcher package is a Flutter plugin that allows developers to launch various types of URLs and perform actions such as opening web pages, making phone calls, sending emails, and launching map applications. It abstracts the platform-specific code required for these tasks, making it easy to incorporate these functionalities into your Flutter apps regardless of the platform (Android or iOS). Installation: To start using the URL Launcher package in your Flutter project, follow these s...
Read more

If and Else in Flutter

-
Image
 Flutter if & else: 3 ways of implementation if and else statements allow developers to execute different blocks of code based on specific conditions. This can help to create more dynamic and responsive user interfaces by allowing the app to respond differently to different inputs or user interactions.    The Problem: In contrast, Flutter provides an error message when you attempt to use the if-else statement directly within your widget.                  Unfortunately, you can’t write if statement inside your widget as if you were writing in your method or function. But there are a few ways you can write a conditional statement inside your widget. Let’s see them.                A description of how to use an If Else Statement in a Flutter           widget: Using the Ternary Operator Using the Spread Operator Using the Method ...
Read more

Flutter Project Migration

-
Image
  Migration to null safety in flutter. Problem Statement:   The newer versions of Flutter supports null safety but the older versions of Flutter does not have this type of support, and to run older applications makes it difficult to build or run the application  in it. To overcome this problem we need to perform a migration of versions. Solution of this problem: Firstly we need to check the version of dart. It should be greater than or equal to 2.12. To check the version of dart use the following command dart --version After that we need to check dependency status, use the following command to perform the dependency status check dart pub outdated --mode=null-safety Here’s an example of the output for a simple package. The green checkmarked version for each package supports null safety: Before migrating the package’s code, update its dependencies to null-safe version: Run dart pub upgrade --null-safety to upgrade to the latest versions supporting null safety.  Note: ...
Read more