Drawer Behavior - Flutter

Drawer behavior is a library that provide an extra behavior on drawer, such as, move view or scaling view's height while drawer on slide.

---

Code Base & Credit : https://github.com/matthew-carroll/flutter_ui_challenge_zoom_menu

---

Table of contents

• Drawer Behavior - Flutter
  • Table of contents
    • Todo
    • NEW UPDATES
  • Usage
  • Example
  • Migration (Null-safety Release)
    • mainDrawer (DrawerScaffold) -> defaultDirection (DrawerScaffold)
  • Migration
    • contentView (Screen) -> builder (ScreenBuilder)
    • menuView (MenuView) -> drawers (List<SideDrawer>)
    • percentage (DrawerScaffold) -> drawers (List<SideDrawer>))
  • Preview
    • Scale Effect
    • Right Drawer
    • 3D Effect
    • Drawer with Header
    • Drawer with Footer
    • Drawer with Header and Custom Builder
    • Peek Drawer
  • ⚙️ Customization Options
    • DrawerScaffold Parameters:
    • SideDrawer Parameters:
  • Contributors

Todo

https://github.com/shiburagi/Drawer-Behavior-Flutter/projects/1

NEW UPDATES

Version 2.3

• Peek Menu
• ClassName.identifier: SideDrawer.count(), SideDrawer.child() and SideDrawer.custom()
• Uncontrol SideDrawer

Version 2.0

• Sound null-safety

Version 1.0

• Elevation Config
• 3D effect
• Multi-Drawer
• Right Drawer

Version 0.0

• Floating action button with location and animator
• Bottom navigation bar
• Extended body
• AndroidX support

Usage

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  drawerbehavior: latest_version

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:drawerbehavior/drawerbehavior.dart';

Example

class DrawerScale extends StatefulWidget {
  @override
  _DrawerScaleState createState() => _DrawerScaleState();
}

class _DrawerScaleState extends State<DrawerScale> {
  late int selectedMenuItemId;

  @override
  void initState() {
    selectedMenuItemId = menu.items[0].id;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DrawerScaffold(
      appBar: AppBar(
          title: Text("Drawer - Scale"),
          actions: [IconButton(icon: Icon(Icons.add), onPressed: () {})]),
      drawers: [
        SideDrawer(
          percentage: 0.6,
          menu: menu,
          direction: Direction.left,
          animation: true,
          color: Theme.of(context).primaryColor,
          selectedItemId: selectedMenuItemId,
          onMenuItemSelected: (itemId) {
            setState(() {
              selectedMenuItemId = itemId;
            });
          },
        )
      ],
      builder: (context, id) => IndexedStack(
        index: id,
        children: menu.items
            .map((e) => Center(
                  child: Text("Page~${e.title}"),
                ))
            .toList(),
      ),
    );
  }
}

Migration (Null-safety Release)

---

mainDrawer (DrawerScaffold) -> defaultDirection (DrawerScaffold)

new DrawerScaffold(
  mainDrawer: Direction.right,
  ...
);

to

new DrawerScaffold(
  defaultDirection: Direction.right,
  ...
);

---

Migration

---

contentView (Screen) -> builder (ScreenBuilder)

contentView: Screen(
  contentBuilder: (context) => Center(child: _widget),
  color: Colors.white,
),

to

builder: (context, id) => Center(child: _widget),

---

menuView (MenuView) -> drawers (List<SideDrawer>)

menuView: new MenuView(
    menu: menu,
    headerView: headerView(context),
    animation: false,
    mainAxisAlignment: MainAxisAlignment.start,
    color: Theme.of(context).primaryColor,
    selectedItemId: selectedMenuItemId,
    onMenuItemSelected: (String itemId) {
      selectedMenuItemId = itemId;
      if (itemId == 'restaurant') {
        setState(() => _widget = Text("1"));
      } else {
        setState(() => _widget = Text("default"));
      }
    },
  ),

to

drawers: [
  SideDrawer(
    menu: menu,
    direction: Direction.left, // Drawer position, left or right
    animation: true,
    color: Theme.of(context).primaryColor,
    selectedItemId: selectedMenuItemId,
    onMenuItemSelected: (itemId) {
      setState(() {
        selectedMenuItemId = itemId;
      });
    },
  )
],

---

percentage (DrawerScaffold) -> drawers (List<SideDrawer>))

DrawerScaffold(
  percentage: 0.6,
  ...
);

to

DrawerScaffold(
  drawers: [
    SideDrawer(
      percentage: 0.6,
      ...
    )
  ]  
  ...
);

---

Preview

Scale Effect

new DrawerScaffold(
  drawers: [
    SideDrawer(
      percentage: 0.6,
      ...
    )
  ]
  ...
);

---

Right Drawer

new DrawerScaffold(
  drawers: [
    SideDrawer(
      direction:Direction.right
      ...
    )
  ]
  ...
);

---

3D Effect

new DrawerScaffold(
  drawers: [
    SideDrawer(
      degree: 45,
      ...
    )
  ]
  ...
);

---

Drawer with Header

new DrawerScaffold(
  headerView: headerView(context),
  ...
);

---

Drawer with Footer

new DrawerScaffold(
  footerView: footerView(context),
  ...
);

---

Drawer with Header and Custom Builder

new DrawerScaffold(
  headerView: headerView(context),
  drawers: [
      SideDrawer(
        itemBuilder:
            (BuildContext context, MenuItem menuItem, bool isSelected) {
          return Container(
            color: isSelected
                ? Theme.of(context).colorScheme.secondary.withOpacity(0.7)
                : Colors.transparent,
            padding: EdgeInsets.fromLTRB(24, 16, 24, 16),
            child: Text(
              menuItem.title,
              style: Theme.of(context).textTheme.subtitle1?.copyWith(
                  color: isSelected ? Colors.black87 : Colors.white70),
            ),
          );
        }
      )
  ],
  ...
);

---

Peek Drawer

new DrawerScaffold(
  headerView: headerView(context),
  drawers: [
      SideDrawer(
        peekMenu: true,
        percentage: 1,
        menu: menuWithIcon,
        direction: Direction.left,
      )
  ],
  ...
);

---

⚙️ Customization Options

You can fine-tune the behavior and appearance of your drawers using various parameters available for both DrawerScaffold and SideDrawer.

DrawerScaffold Parameters:

• drawers: A list of SideDrawer widgets, allowing you to define multiple drawers (e.g., left and right).
• appBar: Provides a custom AppBar for your main content.
• body / builder: Defines the main content area of your application. You should use either body for static content or builder if your content needs to react to drawer states (e.g., selected menu item).
• contentShadow: Controls the shadow cast by the main content panel when a drawer is open.
• cornerRadius: Sets the corner radius for the main content panel, giving it rounded edges.
• controller: An optional DrawerScaffoldController for programmatic control over opening, closing, and toggling drawers.
• enableGestures: A boolean flag to enable or disable horizontal drag gestures for opening/closing drawers.
• defaultDirection: Specifies the initial drawer direction (e.g., Direction.left) that will be primarily controlled by toggle().
• onSlide, onOpened, onClosed: Callbacks that fire when the drawer slides, fully opens, or fully closes, respectively.
• backgroundColor: The background color of the scaffold that sits behind your main content and drawers.

SideDrawer Parameters:

• menu: If you're building a menu-driven drawer, pass a Menu object containing your MenuItems.
• child: Alternatively, you can provide a single, fully custom Widget to be the content of the drawer.
• itemBuilder: For highly customized or dynamically generated lists of items within the drawer, you can provide a SideDrawerItemBuilder.
• direction: Determines whether the drawer slides from Direction.left or Direction.right.
• drawerWidth: Sets the fixed width of the drawer in pixels.
• peekSize: When peekMenu is enabled, this defines the visible width of the drawer when it's in its "peek" state.
• percentage: If slide is true, this controls how much the main content scales down (e.g., 0.8 for 80% size) when the drawer opens.
• degree: If a rotation animation is desired, this sets the degree of 3D rotation for the main content (clamped between 15 and 45 degrees).
• slide: A boolean that, when true, makes the main content slide horizontally along with the drawer.
• animation: Enables or disables subtle animation effects on individual menu items as the drawer opens.
• peekMenu: If true, the drawer will remain partially visible (at peekSize) even when "closed."
• hideOnItemPressed: When true, the drawer automatically closes after a menu item is tapped.
• headerView, footerView: Custom widgets that can be placed at the top and bottom of the drawer content, respectively.
• color, background: Control the background Color or DecorationImage of the drawer itself.
• selectorColor: Sets the color of the visual indicator that highlights the currently selected menu item.
• duration, curve: Define the Duration and Curve for the drawer's opening and closing animations.

---

Contributors

trademunch 💻

anjarnaufals 💻

Vladimir Vlach 💻

Chris Hayen 💻