shiburagi / 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.
MIT License
209 stars 36 forks source link
android drawer drawer-layout drawer-navigation drawerlayout flutter flutter-package flutter-plugin flutter-widget ios menu menuview navigation-drawer sidebar slide

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

Version 2.0

Version 1.0

Version 0.0

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\)

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\))

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

Drawer with Footer

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

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;

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;

MenuItem

String id;
String title;
IconData icon;

Contributors

trademunch
trademunch

💻
anjarnaufals
anjarnaufals

💻
Vladimir Vlach
Vladimir Vlach

💻