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

Published 47 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
copied to clipboard
  1. Install it

You can install packages from the command line:

with Flutter:

$ flutter packages get
copied to clipboard

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';
copied to clipboard

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(),
      ),
    );
  }
}
copied to clipboard

Migration (Null-safety Release) #

---

mainDrawer (DrawerScaffold) -> defaultDirection (DrawerScaffold) #

new DrawerScaffold(
  mainDrawer: Direction.right,
  ...
);
copied to clipboard

to

new DrawerScaffold(
  defaultDirection: Direction.right,
  ...
);
copied to clipboard

---

Migration #

---

contentView (Screen) -> builder (ScreenBuilder) #

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

to

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

---

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"));
      }
    },
  ),
copied to clipboard

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;
      });
    },
  )
],
copied to clipboard

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

DrawerScaffold(
  percentage: 0.6,
  ...
);
copied to clipboard

to

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

Preview #

Scale Effect #

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

Right Drawer #

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

3D Effect #

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

Drawer with Header #

new DrawerScaffold(
  headerView: headerView(context),
  ...
);
copied to clipboard
new DrawerScaffold(
  footerView: footerView(context),
  ...
);
copied to clipboard

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),
            ),
          );
        }
      )
  ],
  ...
);
copied to clipboard

Peek Drawer #

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

Customize #

DrawerScaffold

List<SideDrawer> drawers; //required
DrawerScaffoldController controller;
ScreenBuilder builder;
bool enableGestures; // default: true
PreferredSizeWidget appBar;
double cornerRadius; // default: 16
double bacgroundColor; // default: Theme.of(context).scaffoldBackgroundColor
Widget floatingActionButton;
Widget bottomNavigationBar;
FloatingActionButtonLocation floatingActionButtonLocation;
FloatingActionButtonAnimator floatingActionButtonAnimator;
List<BoxShadow> contentShadow;
Widget bottomSheet;
bool closeOnPopInvoked; // [IOS] default: true
bool extendBodyBehindAppBar;
List<Widget> persistentFooterButtons;
bool primary;
bool resizeToAvoidBottomInset;
bool resizeToAvoidBottomPadding;

/// Listen to offset value on slide event for which [SideDrawer]
Function(SideDrawer, double) onSlide;
/// Listen to which [SideDrawer] is opened (offset=1)
Function(SideDrawer) onOpened;
/// Listen to which [SideDrawer] is closed (offset=0)
Function(SideDrawer) onClosed;
copied to clipboard

SideDrawer

double percentage; // default: 0.8
double elevation; // default: 4
double cornerRadius;
double degree; // 15-45 degree
double peekSize; // 56px
Menu menu;
String selectedItemId;
Direction direction;
Duration duration;
Curve curve;
bool animation; //default: false
bool slide; //default: false
bool peekMenu; //default: false
bool hideOnItemPressed; //default: true
Function(String) onMenuItemSelected;
Widget headerView;
Widget footerView;
DecorationImage background;
Color color;
Color selectorColor;
TextStyle textStyle;
Alignment alignment;
EdgeInsets padding;
Function(BuildContext, MenuItem, bool) itemBuilder;
copied to clipboard

MenuItem

String id;
String title;
IconData icon;
copied to clipboard

Contributors #

trademunch
trademunch
💻		 anjarnaufals
anjarnaufals
💻		 Vladimir Vlach
Vladimir Vlach
💻		 Chris Hayen
Chris Hayen
💻

← Metadata

162
likes
150
points
388
downloads

Publisher

verified publisherzariman.dev

Weekly Downloads

2024.09.17 - 2025.04.01

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