shiburagi / Drawer Behavior Flutter
Licence: mit
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.
Stars: ✭ 110
Programming Languages
dart
5743 projects
Projects that are alternatives of or similar to Drawer Behavior Flutter
Duo Navigation Drawer
A flexible, easy to use, unique drawer library for your Android project.
Stars: ✭ 986 (+796.36%)
Mutual labels: menu, slide, drawer, navigation-drawer, drawerlayout
Drawer Behavior
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.
Stars: ✭ 394 (+258.18%)
Mutual labels: slide, drawer, navigation-drawer, drawerlayout
minavdrawer
Easy to add different animations into standard NavigationDrawer.
Stars: ✭ 93 (-15.45%)
Mutual labels: drawer, navigation-drawer, drawerlayout
Materialdrawer
The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.
Stars: ✭ 11,498 (+10352.73%)
Mutual labels: drawer, navigation-drawer, drawerlayout
Vue Drawer Layout
A simple DrawerLayout component for Vue.js.
Stars: ✭ 392 (+256.36%)
Mutual labels: drawer, sidebar, drawerlayout
Fantasyslide
Another sliding menu base on DrawerLayout
Stars: ✭ 1,431 (+1200.91%)
Mutual labels: sidebar, drawerlayout
drawer-with-bottom-navigation-architecture
Sample android kotlin project with both drawer and bottom navigation together
Stars: ✭ 42 (-61.82%)
Mutual labels: drawer, navigation-drawer
CoolSlidingMenu
A powerful menu that you can customize it。
Stars: ✭ 25 (-77.27%)
Mutual labels: slide, menu
Custom Navigation Drawer
Custom Navigation Drawer Library for Android
Stars: ✭ 364 (+230.91%)
Mutual labels: navigation-drawer, drawerlayout
drawer
A touch-enabled drawer component for the modern web.
Stars: ✭ 26 (-76.36%)
Mutual labels: drawer, menu
Slidingrootnav
DrawerLayout-like ViewGroup, where a "drawer" is hidden under the content view, which can be shifted to make the drawer visible.
Stars: ✭ 2,939 (+2571.82%)
Mutual labels: navigation-drawer, drawerlayout
Hamburger React
Animated hamburger menu icons for React (1.5 KB) 🍔
Stars: ✭ 391 (+255.45%)
Mutual labels: menu, sidebar
react-native-navigation-drawer-layout
React Native library to generate navigation drawer layout.
Stars: ✭ 26 (-76.36%)
Mutual labels: drawer, drawerlayout
react-native-panel
A Customizable React Native Panel for Android and iOS
Stars: ✭ 35 (-68.18%)
Mutual labels: slide, menu
fxp-jquery-sidebar
A responsive and fluid sidebar with jQuery and Hammer.js
Stars: ✭ 14 (-87.27%)
Mutual labels: drawer, sidebar
Beagle
A smart, reliable, and highly customizable debug menu library for Android apps that supports screen recording, network activity logging, and many other useful features.
Stars: ✭ 287 (+160.91%)
Mutual labels: menu, drawer
DKNavigationDrawer
Navigation Drawer for iOS using Swift. https://media.giphy.com/media/I45syjhreC0Rq/giphy.gif
Stars: ✭ 17 (-84.55%)
Mutual labels: drawer, navigation-drawer
Materialdrawerkt
A Kotlin DSL wrapper around the mikepenz/MaterialDrawer library.
Stars: ✭ 508 (+361.82%)
Mutual labels: drawer, navigation-drawer
Menu
Menu and sidebar management package for Laravel
Stars: ✭ 6 (-94.55%)
Mutual labels: menu, sidebar
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
https://github.com/shiburagi/Drawer-Behavior-Flutter/projects/1
Todo :NEW UPDATES
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
Table of contents
Usage
- Depend on it
Add this to your package's pubspec.yaml file:
dependencies:
drawerbehavior: latest_version
- 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.
- Import it
Now in your Dart code, you can use:
import 'package:drawerbehavior/drawerbehavior.dart';
Drawer-Behavior
For Android :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
new DrawerScaffold(
drawers: [
SideDrawer(
percentage: 0.6,
...
)
]
...
);
new DrawerScaffold(
drawers: [
SideDrawer(
direction:Direction.right
...
)
]
...
);
new DrawerScaffold(
drawers: [
SideDrawer(
degree: 45,
...
)
]
...
);
new DrawerScaffold(
headerView: headerView(context),
...
);
new DrawerScaffold(
footerView: footerView(context),
...
);
new DrawerScaffold(
headerView: headerView(context),
drawers: [
SideDrawer(
itemBuilder:
(BuildContext context, MenuItem menuItem, bool isSelected) {
return Container(
color: isSelected
? Theme.of(context).accentColor.withOpacity(0.7)
: Colors.transparent,
padding: EdgeInsets.fromLTRB(24, 16, 24, 16),
child: Text(
menuItem.title,
style: Theme.of(context).textTheme.subhead?.copyWith(
color: isSelected ? Colors.black87 : Colors.white70),
),
);
}
)
],
...
);
Customize
DrawerScaffold
DrawerScaffoldController controller;
List<SideDrawer> drawers;
ScreenBuilder builder;
bool enableGestures; // default: true
AppBar 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;
SideDrawer
double percentage; // default: 0.8
double elevation; // default: 4
double cornerRadius;
double degree; // 15-45 degree
Menu menu;
String selectedItemId;
Direction direction;
Duration duration;
Curve curve;
bool animation; //default: false
bool slide; //default: false
Function(String) onMenuItemSelected;
Widget headerView;
Widget footerView;
DecorationImage background;
Color color;
Color selectorColor;
TextStyle textStyle;
Alignment alignment;
EdgeInsets padding;
Function(BuildContext, MenuItem, bool) itemBuilder;
MenuItem<T>
T id;
String title;
IconData icon;
Widget prefix;
Widget suffix;
dynamic data;
Contributor
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].