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
- Radius Parameter
- Right Menu View
- 3D effect
- Material design drawer's behavior
- Depend on it
Add this to your package's pubspec.yaml file:
dependencies:
drawerbehavior: ^0.0.4- 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';For Android : Drawer-Behavior
import 'package:flutter/material.dart';
import 'package:drawerbehavior/drawerbehavior.dart';
class Drawer4 extends StatefulWidget {
@override
_Drawer4State createState() => _Drawer4State();
}
class _Drawer4State extends State<Drawer4> {
final menu = new Menu(
items: [
new MenuItem(
id: 'restaurant',
title: 'THE PADDOCK',
),
new MenuItem(
id: 'other1',
title: 'THE HERO',
),
new MenuItem(
id: 'other2',
title: 'HELP US GROW',
),
new MenuItem(
id: 'other3',
title: 'SETTINGS',
),
],
);
var selectedMenuItemId = 'restaurant';
var _widget = Text("1");
Widget headerView(BuildContext context) {
return Column(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(16, 12, 16, 0),
child: Row(
children: <Widget>[
new Container(
width: 48.0,
height: 48.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: AssetImage("assets/user1.jpg")))),
Container(
margin: EdgeInsets.only(left: 16),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"John Witch",
style: Theme.of(context)
.textTheme
.subhead
.copyWith(color: Colors.white),
),
Text(
"[email protected]",
style: Theme.of(context)
.textTheme
.subtitle
.copyWith(color: Colors.white.withAlpha(200)),
)
],
))
],
),
),
Divider(
color: Colors.white.withAlpha(200),
height: 16,
)
],
);
}
@override
Widget build(BuildContext context) {
return new DrawerScaffold(
percentage: 1,
cornerRadius: 0,
appBar: AppBarProps(
title: Text("Drawer 4"),
actions: [IconButton(icon: Icon(Icons.add), onPressed: () {})]),
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"));
}
},
),
contentView: Screen(
contentBuilder: (context) => Center(child: _widget),
color: Colors.white,
),
);
}
}
new DrawerScaffold(
percentage: 0.6,
...
);
new DrawerScaffold(
percentage: 0.6,
headerView: headerView(context),
...
);
new DrawerScaffold(
percentage: 0.6,
...
);
new DrawerScaffold(
headerView: headerView(context),
...
);
new DrawerScaffold(
footerView: footerView(context),
...
);
new DrawerScaffold(
headerView: headerView(context),
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),
),
);
}
...
);DrawerScaffold
DrawerScaffoldController controller;
MenuView menuView;
Screen contentView;
AppBarProps appBar;
bool showAppBar;
double percentage;
double cornerRadius;Screen
String title;
DecorationImage background;
WidgetBuilder contentBuilder;
Color color;
Color appBarColor;MenuView
Menu menu;
String selectedItemId;
bool animation;
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
String id;
String title;
IconData icon;AppBarProps
Icon leadingIcon;
bool automaticallyImplyLeading;
List<Widget> actions;
Widget flexibleSpace;
PreferredSizeWidget bottom;
double elevation;
Brightness brightness;
IconThemeData iconTheme;
TextTheme textTheme;
bool primary;
bool centerTitle;
double titleSpacing;
double toolbarOpacity;
double bottomOpacity;
Color backgroundColor;
Widget title;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent