drawerbehavior

Description:

drawerbehavior

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

Android Native


Drawer-Behavior
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


Customize
Contributor



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 #

Depend on it

Add this to your package's pubspec.yaml file:
dependencies:
drawerbehavior: latest_version
copied to clipboard

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.

Import it

Now in your Dart code, you can use:
import 'package:drawerbehavior/drawerbehavior.dart';
copied to clipboard
---
Android Native #
Drawer-Behavior
---
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

Drawer with Footer #

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
DrawerScaffoldController controller;
List<SideDrawer> drawers;
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 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
Contributor #

Vladimir Vlach
trademunch