drawerbehavior 3.0.4 copy "drawerbehavior: ^3.0.4" to clipboard
drawerbehavior: ^3.0.4 copied to clipboard

Published 3 days ago • verified publisherzariman.devDart 3 compatible
SDKFlutter
PlatformAndroidiOSLinuxmacOSwebWindows
→

Metadata

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..

More...

pub package

All Contributors

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.

Alt Text

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

Table of contents #

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
  1. 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.

  1. 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),
  ...
);

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
trademunch
💻		 anjarnaufals
anjarnaufals
💻		 Vladimir Vlach
Vladimir Vlach
💻		 Chris Hayen
Chris Hayen
💻

← Metadata

164
likes
160
points
399
downloads

Publisher

verified publisherzariman.dev

Weekly Downloads

Metadata

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..

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on drawerbehavior

Back